@sproutsocial/seeds-react-profile 0.2.0 → 0.3.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     13.21 KB
-CJS dist/index.js.map 18.11 KB
-CJS ⚡️ Build success in 117ms
-ESM dist/esm/index.js     9.61 KB
-ESM dist/esm/index.js.map 17.97 KB
-ESM ⚡️ Build success in 115ms
+CJS dist/index.js     13.39 KB
+CJS dist/index.js.map 18.70 KB
+CJS ⚡️ Build success in 131ms
+ESM dist/esm/index.js     9.79 KB
+ESM dist/esm/index.js.map 18.56 KB
+ESM ⚡️ Build success in 132ms
 DTS Build start
-DTS ⚡️ Build success in 8909ms
-DTS dist/index.d.ts  5.53 KB
-DTS dist/index.d.mts 5.53 KB
-Done in 11.50s.
+DTS ⚡️ Build success in 9971ms
+DTS dist/index.d.ts  5.82 KB
+DTS dist/index.d.mts 5.82 KB
+Done in 11.79s.

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sproutsocial/seeds-react-profile
 
+## 0.3.0
+
+### Minor Changes
+
+- deccf6b: - InlineProfile now automatically hides avatar when avatarUrl is not provided
+  - Update ProfileToken with design improvements: verticalAlign: 'middle', updated padding (2px 6px), and margin (2px 0)
+  - **BREAKING**: ProfileToken no longer accepts avatarUrl, secondaryName, or avatarSize props (enforces design standards for compact token display)
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -261,7 +261,7 @@ var InlineProfile = ({
   const displayName = name || secondaryName || "Unknown Profile";
   const avatarSize = avatarSizeOverride || avatarSizeMap[size];
   return /* @__PURE__ */ jsxs2(InlineProfileContainer, { className, $size: size, children: [
-    /* @__PURE__ */ jsx3(InlineProfileAvatar, { children: /* @__PURE__ */ jsx3(Avatar2, { src: avatarUrl, name: displayName, size: avatarSize }) }),
+    avatarUrl && /* @__PURE__ */ jsx3(InlineProfileAvatar, { children: /* @__PURE__ */ jsx3(Avatar2, { src: avatarUrl, name: displayName, size: avatarSize }) }),
     /* @__PURE__ */ jsxs2(InlineProfileContent, { children: [
       partnerName && /* @__PURE__ */ jsx3(InlineProfileNetwork, { children: /* @__PURE__ */ jsx3(
         PartnerLogo2,
@@ -294,6 +294,10 @@ var StyledProfileToken = styled3(Token)`
   box-sizing: border-box;
   display: inline-flex;
   max-width: 100%;
+  vertical-align: middle;
+  padding: ${(props) => props.theme.space[100]}
+    ${(props) => props.theme.space[200]};
+  margin: ${(props) => props.theme.space[100]} 0;
 `;
 var ProfileToken = ({
   className,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileCard.tsx","../../src/VerifiedProfileIcon.tsx","../../src/InlineProfile.tsx","../../src/ProfileToken.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n} from \"@sproutsocial/seeds-react-card\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Link } from \"@sproutsocial/seeds-react-link\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeProfileCardProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\n// Styled Components\nconst StyledProfileCard = styled(Card)`\n  max-width: 300px;\n`;\n\nconst StyledCardHeader = styled(CardHeader)<{\n  $bannerColor?: string;\n  $partnerName?: string;\n}>`\n  position: relative;\n  height: 80px;\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]} 0 ${(props) => props.theme.space[400]};\n  margin-bottom: 0;\n  color: ${(props) => props.theme.colors.text.inverse};\n  border-radius: ${(props) => props.theme.radii[500]}\n    ${(props) => props.theme.radii[500]} 0 0;\n  ${(props) => {\n    // Use explicit bannerColor if provided\n    if (props.$bannerColor) {\n      return `background: ${props.$bannerColor};`;\n    }\n    // Fall back to theme.colors.network[partnerName] if partnerName is available\n    if (props.$partnerName && props.theme.colors.network) {\n      const networkColor =\n        props.theme.colors.network[\n          props.$partnerName as keyof typeof props.theme.colors.network\n        ];\n      return networkColor ? `background: ${networkColor};` : \"\";\n    }\n    return \"\";\n  }}\n`;\n\nconst BannerContent = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n`;\n\nconst ActionsSection = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n  padding: 0 ${(props) => props.theme.space[300]};\n\n  &:empty {\n    min-height: 44px;\n  }\n`;\n\nconst StyledCardContent = styled(CardContent)`\n  display: flex;\n  flex-direction: column;\n  gap: ${(props) => props.theme.space[300]};\n  padding: 0 ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]};\n`;\n\nconst ProfileNameSection = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n`;\n\nconst InfoRow = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n`;\n\n/**\n * A flexible profile component that can display user profiles in various formats\n * across different social networks with consistent styling and behavior.\n */\nexport const ProfileCard = ({\n  partnerName,\n  name,\n  secondaryName,\n  avatarUrl,\n  subtext,\n  description,\n  verificationType,\n  profileUrl,\n  location,\n  bannerColor,\n  bannerContent,\n  metadata,\n  profileActions,\n  footer,\n  cardProps,\n}: TypeProfileCardProps) => {\n  return (\n    <StyledProfileCard role=\"presentation\" {...cardProps}>\n      <StyledCardHeader $bannerColor={bannerColor} $partnerName={partnerName}>\n        <Avatar src={avatarUrl} name={name} size=\"60px\" mt={450} />\n        {bannerContent && <BannerContent>{bannerContent}</BannerContent>}\n      </StyledCardHeader>\n\n      <ActionsSection>{profileActions}</ActionsSection>\n\n      <StyledCardContent>\n        <ProfileNameSection>\n          {partnerName && (\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={`${partnerName} profile`}\n              size=\"small\"\n            />\n          )}\n          <Text.SubHeadline as=\"h2\">{name}</Text.SubHeadline>\n        </ProfileNameSection>\n\n        {subtext && (\n          <Text fontSize={200} color=\"text.subtext\">\n            {subtext}\n          </Text>\n        )}\n\n        {secondaryName && (\n          <InfoRow>\n            {profileUrl ? (\n              <Link href={profileUrl} external>\n                <Text fontSize={200}>{secondaryName}</Text>\n                <Icon\n                  name=\"arrow-right-up-outline\"\n                  aria-hidden\n                  ml={100}\n                  size=\"small\"\n                />\n              </Link>\n            ) : (\n              <Text.SmallByline color=\"text.subtext\">\n                {secondaryName}\n              </Text.SmallByline>\n            )}\n            {verificationType && (\n              <VerifiedProfileIcon\n                partnerName={partnerName}\n                verificationType={verificationType}\n              />\n            )}\n          </InfoRow>\n        )}\n\n        {description && <Text fontSize={200}>{description}</Text>}\n\n        {location && (\n          <InfoRow>\n            <Icon name=\"location-pin-outline\" aria-hidden size=\"small\" />\n            <Text fontSize={200}>{location}</Text>\n          </InfoRow>\n        )}\n\n        {metadata && metadata.length > 0 && (\n          <InfoRow>\n            {metadata.map((info, index) => (\n              <Text fontSize={200} key={index}>\n                {info}\n              </Text>\n            ))}\n          </InfoRow>\n        )}\n      </StyledCardContent>\n\n      {footer && <CardFooter>{footer}</CardFooter>}\n    </StyledProfileCard>\n  );\n};\n\nexport default ProfileCard;\n","import { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeProfileNetwork, TypeProfileVerification } from \"./types\";\n\n// TODO: Move these to a more appropriate location\nconst VERIFICATION_COLORS = {\n  twitter: \"#000000\",\n  facebook: \"#1877F2\",\n  x: \"#000000\",\n  linkedin: \"#0A66C2\",\n  instagram: \"#e4405f\",\n  gray: \"#515e5f\",\n} as const;\n\n/**\n * Gets the verification color based on partnerName and verification type\n */\nexport const getVerificationColor = (\n  partnerName?: TypeProfileNetwork,\n  verificationType?: TypeProfileVerification\n): string => {\n  if (!verificationType || verificationType === \"not_verified\") return \"\";\n\n  switch (verificationType) {\n    case \"blue_verified\":\n      // Use partner-specific blue color\n      return partnerName === \"facebook\"\n        ? VERIFICATION_COLORS.facebook\n        : VERIFICATION_COLORS.twitter;\n    case \"gray_verified\":\n      return VERIFICATION_COLORS.gray;\n    case \"verified\":\n    default:\n      // Default to partner color or Twitter blue\n      if (partnerName && partnerName in VERIFICATION_COLORS) {\n        return VERIFICATION_COLORS[\n          partnerName as keyof typeof VERIFICATION_COLORS\n        ];\n      }\n      return VERIFICATION_COLORS.twitter;\n  }\n};\n\nexport interface TypeVerifiedProfileIconProps {\n  partnerName?: TypeProfileNetwork;\n  verificationType: TypeProfileVerification;\n}\n\nexport const VerifiedProfileIcon = ({\n  partnerName,\n  verificationType,\n}: TypeVerifiedProfileIconProps) => {\n  if (!verificationType || verificationType === \"not_verified\") return;\n\n  const verificationColor = getVerificationColor(partnerName, verificationType);\n  return (\n    <Icon\n      title=\"Verified\"\n      aria-label=\"Verified account\"\n      color={verificationColor}\n      name=\"verified\"\n      ml=\"150\"\n    />\n  );\n};\n","import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport type { TypeInlineProfileProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\nconst InlineProfileContainer = styled.span<{\n  $size?: \"small\" | \"medium\" | \"large\";\n}>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  max-width: 100%;\n  ${(props) => props.theme.typography[200]}\n  color: ${(props) => props.theme.colors.text.subtext};\n  text-align: inherit;\n`;\n\nconst InlineProfileAvatar = styled.span`\n  display: inline-flex;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileContent = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileNetwork = styled.span`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileText = styled.span`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileName = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  text-transform: lowercase;\n  color: ${(props) => props.theme.colors.text.body};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst InlineProfileHandle = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  color: ${(props) => props.theme.colors.text.subtext};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst avatarSizeMap = {\n  small: \"16px\",\n  medium: \"20px\",\n  large: \"24px\",\n} as const;\n\n/**\n * A compact inline profile component that displays avatar, name/handle, and verification.\n * Perfect for use in post headers, comments, or other compact spaces.\n *\n * @param props - Profile props\n * @param props.name - Name of the profile\n * @param props.secondaryName - Secondary name of the profile\n * @param props.partnerName - Partner logo name\n * @param props.partnerLogoLabel - Aria-label for the partner logo\n * @param props.avatarSize - Size of the avatar\n * @param props.avatarUrl - Image URL for the avatar\n * @param props.children - Additional elements to render within the profile component\n * @returns JSX.Element representing a user profile\n *\n * @example\n * <InlineProfile\n *   name=\"John Doe\"\n *   secondaryName=\"johndoe123\"\n *   partnerName=\"facebook\"\n *   partnerLogoLabel=\"Facebook Logo\"\n *   avatarSize=\"24px\"\n *   avatarUrl=\"https://example.com/avatar.jpg\"\n * >\n *   <Badge text=\"Moderator\" badgeColor=\"green\" />\n * </InlineProfile>\n */\nexport const InlineProfile = ({\n  name,\n  secondaryName,\n  partnerName,\n  partnerLogoLabel,\n  size = \"medium\",\n  avatarSize: avatarSizeOverride,\n  avatarUrl,\n  verificationType,\n  className,\n}: TypeInlineProfileProps) => {\n  const displayName = name || secondaryName || \"Unknown Profile\";\n  const avatarSize = avatarSizeOverride || avatarSizeMap[size];\n\n  return (\n    <InlineProfileContainer className={className} $size={size}>\n      <InlineProfileAvatar>\n        <Avatar src={avatarUrl} name={displayName} size={avatarSize} />\n      </InlineProfileAvatar>\n\n      <InlineProfileContent>\n        {partnerName && (\n          <InlineProfileNetwork>\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={partnerLogoLabel || `${partnerName} profile`}\n              size=\"small\"\n            />\n          </InlineProfileNetwork>\n        )}\n\n        <InlineProfileText>\n          {name && <InlineProfileName>{name}</InlineProfileName>}\n\n          {secondaryName && (\n            <InlineProfileHandle>{secondaryName}</InlineProfileHandle>\n          )}\n        </InlineProfileText>\n\n        {verificationType && (\n          <VerifiedProfileIcon\n            partnerName={partnerName}\n            verificationType={verificationType}\n          />\n        )}\n      </InlineProfileContent>\n    </InlineProfileContainer>\n  );\n};\n","import styled from \"styled-components\";\nimport { Token } from \"@sproutsocial/seeds-react-token\";\nimport { InlineProfile } from \"./InlineProfile\";\nimport type { ProfileTokenProps } from \"./types\";\n\nconst StyledProfileToken = styled(Token)`\n  box-sizing: border-box;\n  display: inline-flex;\n  max-width: 100%;\n`;\n\n/**\n * A ProfileToken component that wraps CompactProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n */\nexport const ProfileToken = ({\n  className,\n  onClick,\n  tokenProps,\n  ...props\n}: ProfileTokenProps) => (\n  <StyledProfileToken\n    className={className}\n    closeable={false}\n    onClick={onClick}\n    {...tokenProps}\n  >\n    <InlineProfile size=\"small\" {...props} />\n  </StyledProfileToken>\n);\n\nexport default ProfileToken;\n"],"mappings":"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","names":["Icon","jsx","Icon","styled","PartnerLogo","Avatar","jsx","jsxs","styled","Avatar","PartnerLogo","styled","jsx","styled"]}
+{"version":3,"sources":["../../src/ProfileCard.tsx","../../src/VerifiedProfileIcon.tsx","../../src/InlineProfile.tsx","../../src/ProfileToken.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n} from \"@sproutsocial/seeds-react-card\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Link } from \"@sproutsocial/seeds-react-link\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeProfileCardProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\n// Styled Components\nconst StyledProfileCard = styled(Card)`\n  max-width: 300px;\n`;\n\nconst StyledCardHeader = styled(CardHeader)<{\n  $bannerColor?: string;\n  $partnerName?: string;\n}>`\n  position: relative;\n  height: 80px;\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]} 0 ${(props) => props.theme.space[400]};\n  margin-bottom: 0;\n  color: ${(props) => props.theme.colors.text.inverse};\n  border-radius: ${(props) => props.theme.radii[500]}\n    ${(props) => props.theme.radii[500]} 0 0;\n  ${(props) => {\n    // Use explicit bannerColor if provided\n    if (props.$bannerColor) {\n      return `background: ${props.$bannerColor};`;\n    }\n    // Fall back to theme.colors.network[partnerName] if partnerName is available\n    if (props.$partnerName && props.theme.colors.network) {\n      const networkColor =\n        props.theme.colors.network[\n          props.$partnerName as keyof typeof props.theme.colors.network\n        ];\n      return networkColor ? `background: ${networkColor};` : \"\";\n    }\n    return \"\";\n  }}\n`;\n\nconst BannerContent = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n`;\n\nconst ActionsSection = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n  padding: 0 ${(props) => props.theme.space[300]};\n\n  &:empty {\n    min-height: 44px;\n  }\n`;\n\nconst StyledCardContent = styled(CardContent)`\n  display: flex;\n  flex-direction: column;\n  gap: ${(props) => props.theme.space[300]};\n  padding: 0 ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]};\n`;\n\nconst ProfileNameSection = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n`;\n\nconst InfoRow = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n`;\n\n/**\n * A flexible profile component that can display user profiles in various formats\n * across different social networks with consistent styling and behavior.\n */\nexport const ProfileCard = ({\n  partnerName,\n  name,\n  secondaryName,\n  avatarUrl,\n  subtext,\n  description,\n  verificationType,\n  profileUrl,\n  location,\n  bannerColor,\n  bannerContent,\n  metadata,\n  profileActions,\n  footer,\n  cardProps,\n}: TypeProfileCardProps) => {\n  return (\n    <StyledProfileCard role=\"presentation\" {...cardProps}>\n      <StyledCardHeader $bannerColor={bannerColor} $partnerName={partnerName}>\n        <Avatar src={avatarUrl} name={name} size=\"60px\" mt={450} />\n        {bannerContent && <BannerContent>{bannerContent}</BannerContent>}\n      </StyledCardHeader>\n\n      <ActionsSection>{profileActions}</ActionsSection>\n\n      <StyledCardContent>\n        <ProfileNameSection>\n          {partnerName && (\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={`${partnerName} profile`}\n              size=\"small\"\n            />\n          )}\n          <Text.SubHeadline as=\"h2\">{name}</Text.SubHeadline>\n        </ProfileNameSection>\n\n        {subtext && (\n          <Text fontSize={200} color=\"text.subtext\">\n            {subtext}\n          </Text>\n        )}\n\n        {secondaryName && (\n          <InfoRow>\n            {profileUrl ? (\n              <Link href={profileUrl} external>\n                <Text fontSize={200}>{secondaryName}</Text>\n                <Icon\n                  name=\"arrow-right-up-outline\"\n                  aria-hidden\n                  ml={100}\n                  size=\"small\"\n                />\n              </Link>\n            ) : (\n              <Text.SmallByline color=\"text.subtext\">\n                {secondaryName}\n              </Text.SmallByline>\n            )}\n            {verificationType && (\n              <VerifiedProfileIcon\n                partnerName={partnerName}\n                verificationType={verificationType}\n              />\n            )}\n          </InfoRow>\n        )}\n\n        {description && <Text fontSize={200}>{description}</Text>}\n\n        {location && (\n          <InfoRow>\n            <Icon name=\"location-pin-outline\" aria-hidden size=\"small\" />\n            <Text fontSize={200}>{location}</Text>\n          </InfoRow>\n        )}\n\n        {metadata && metadata.length > 0 && (\n          <InfoRow>\n            {metadata.map((info, index) => (\n              <Text fontSize={200} key={index}>\n                {info}\n              </Text>\n            ))}\n          </InfoRow>\n        )}\n      </StyledCardContent>\n\n      {footer && <CardFooter>{footer}</CardFooter>}\n    </StyledProfileCard>\n  );\n};\n\nexport default ProfileCard;\n","import { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeProfileNetwork, TypeProfileVerification } from \"./types\";\n\n// TODO: Move these to a more appropriate location\nconst VERIFICATION_COLORS = {\n  twitter: \"#000000\",\n  facebook: \"#1877F2\",\n  x: \"#000000\",\n  linkedin: \"#0A66C2\",\n  instagram: \"#e4405f\",\n  gray: \"#515e5f\",\n} as const;\n\n/**\n * Gets the verification color based on partnerName and verification type\n */\nexport const getVerificationColor = (\n  partnerName?: TypeProfileNetwork,\n  verificationType?: TypeProfileVerification\n): string => {\n  if (!verificationType || verificationType === \"not_verified\") return \"\";\n\n  switch (verificationType) {\n    case \"blue_verified\":\n      // Use partner-specific blue color\n      return partnerName === \"facebook\"\n        ? VERIFICATION_COLORS.facebook\n        : VERIFICATION_COLORS.twitter;\n    case \"gray_verified\":\n      return VERIFICATION_COLORS.gray;\n    case \"verified\":\n    default:\n      // Default to partner color or Twitter blue\n      if (partnerName && partnerName in VERIFICATION_COLORS) {\n        return VERIFICATION_COLORS[\n          partnerName as keyof typeof VERIFICATION_COLORS\n        ];\n      }\n      return VERIFICATION_COLORS.twitter;\n  }\n};\n\nexport interface TypeVerifiedProfileIconProps {\n  partnerName?: TypeProfileNetwork;\n  verificationType: TypeProfileVerification;\n}\n\nexport const VerifiedProfileIcon = ({\n  partnerName,\n  verificationType,\n}: TypeVerifiedProfileIconProps) => {\n  if (!verificationType || verificationType === \"not_verified\") return;\n\n  const verificationColor = getVerificationColor(partnerName, verificationType);\n  return (\n    <Icon\n      title=\"Verified\"\n      aria-label=\"Verified account\"\n      color={verificationColor}\n      name=\"verified\"\n      ml=\"150\"\n    />\n  );\n};\n","import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport type { TypeInlineProfileProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\nconst InlineProfileContainer = styled.span<{\n  $size?: \"small\" | \"medium\" | \"large\";\n}>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  max-width: 100%;\n  ${(props) => props.theme.typography[200]}\n  color: ${(props) => props.theme.colors.text.subtext};\n  text-align: inherit;\n`;\n\nconst InlineProfileAvatar = styled.span`\n  display: inline-flex;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileContent = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileNetwork = styled.span`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileText = styled.span`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileName = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  text-transform: lowercase;\n  color: ${(props) => props.theme.colors.text.body};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst InlineProfileHandle = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  color: ${(props) => props.theme.colors.text.subtext};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst avatarSizeMap = {\n  small: \"16px\",\n  medium: \"20px\",\n  large: \"24px\",\n} as const;\n\n/**\n * A compact inline profile component that displays avatar, name/handle, and verification.\n * Perfect for use in post headers, comments, or other compact spaces.\n *\n * @param props - Profile props\n * @param props.name - Name of the profile\n * @param props.secondaryName - Secondary name of the profile\n * @param props.partnerName - Partner logo name\n * @param props.partnerLogoLabel - Aria-label for the partner logo\n * @param props.avatarSize - Size of the avatar\n * @param props.avatarUrl - Image URL for the avatar\n * @param props.children - Additional elements to render within the profile component\n * @returns JSX.Element representing a user profile\n *\n * @example\n * <InlineProfile\n *   name=\"John Doe\"\n *   secondaryName=\"johndoe123\"\n *   partnerName=\"facebook\"\n *   partnerLogoLabel=\"Facebook Logo\"\n *   avatarSize=\"24px\"\n *   avatarUrl=\"https://example.com/avatar.jpg\"\n * >\n *   <Badge text=\"Moderator\" badgeColor=\"green\" />\n * </InlineProfile>\n */\nexport const InlineProfile = ({\n  name,\n  secondaryName,\n  partnerName,\n  partnerLogoLabel,\n  size = \"medium\",\n  avatarSize: avatarSizeOverride,\n  avatarUrl,\n  verificationType,\n  className,\n}: TypeInlineProfileProps) => {\n  const displayName = name || secondaryName || \"Unknown Profile\";\n  const avatarSize = avatarSizeOverride || avatarSizeMap[size];\n\n  return (\n    <InlineProfileContainer className={className} $size={size}>\n      {avatarUrl && (\n        <InlineProfileAvatar>\n          <Avatar src={avatarUrl} name={displayName} size={avatarSize} />\n        </InlineProfileAvatar>\n      )}\n\n      <InlineProfileContent>\n        {partnerName && (\n          <InlineProfileNetwork>\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={partnerLogoLabel || `${partnerName} profile`}\n              size=\"small\"\n            />\n          </InlineProfileNetwork>\n        )}\n\n        <InlineProfileText>\n          {name && <InlineProfileName>{name}</InlineProfileName>}\n\n          {secondaryName && (\n            <InlineProfileHandle>{secondaryName}</InlineProfileHandle>\n          )}\n        </InlineProfileText>\n\n        {verificationType && (\n          <VerifiedProfileIcon\n            partnerName={partnerName}\n            verificationType={verificationType}\n          />\n        )}\n      </InlineProfileContent>\n    </InlineProfileContainer>\n  );\n};\n","import styled from \"styled-components\";\nimport { Token } from \"@sproutsocial/seeds-react-token\";\nimport { InlineProfile } from \"./InlineProfile\";\nimport type { ProfileTokenProps } from \"./types\";\n\nconst StyledProfileToken = styled(Token)`\n  box-sizing: border-box;\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: middle;\n  padding: ${(props) => props.theme.space[100]}\n    ${(props) => props.theme.space[200]};\n  margin: ${(props) => props.theme.space[100]} 0;\n`;\n\n/**\n * A ProfileToken component that wraps InlineProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n *\n * ProfileToken enforces design standards by only showing the profile name and network logo.\n * It does not support avatars, secondary names (handles), or custom avatar sizes.\n * Use InlineProfile directly if you need more flexibility.\n */\nexport const ProfileToken = ({\n  className,\n  onClick,\n  tokenProps,\n  ...props\n}: ProfileTokenProps) => (\n  <StyledProfileToken\n    className={className}\n    closeable={false}\n    onClick={onClick}\n    {...tokenProps}\n  >\n    <InlineProfile size=\"small\" {...props} />\n  </StyledProfileToken>\n);\n\nexport default ProfileToken;\n"],"mappings":"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","names":["Icon","jsx","Icon","styled","PartnerLogo","Avatar","jsx","jsxs","styled","Avatar","PartnerLogo","styled","jsx","styled"]}

package/dist/index.d.mts

@@ -49,7 +49,7 @@ interface TypeInlineProfileProps extends Omit<TypeBaseProfileProps, "name"> {
     /** The px size of the avatar, which has a default based on the size prop */
     avatarSize?: string;
 }
-interface ProfileTokenProps extends TypeInlineProfileProps {
+interface ProfileTokenProps extends Omit<TypeInlineProfileProps, "avatarUrl" | "secondaryName" | "avatarSize"> {
     /** Click handler for the entire inline profile */
     onClick?: TypeTokenProps["onClick"];
     /** Additional props to pass to the Token component */
@@ -119,8 +119,12 @@ declare const ProfileCard: ({ partnerName, name, secondaryName, avatarUrl, subte
 declare const InlineProfile: ({ name, secondaryName, partnerName, partnerLogoLabel, size, avatarSize: avatarSizeOverride, avatarUrl, verificationType, className, }: TypeInlineProfileProps) => react_jsx_runtime.JSX.Element;
 
 /**
- * A ProfileToken component that wraps CompactProfile in a Seeds Token component.
+ * A ProfileToken component that wraps InlineProfile in a Seeds Token component.
  * This token is not closable and provides a compact way to display profile information inline.
+ *
+ * ProfileToken enforces design standards by only showing the profile name and network logo.
+ * It does not support avatars, secondary names (handles), or custom avatar sizes.
+ * Use InlineProfile directly if you need more flexibility.
  */
 declare const ProfileToken: ({ className, onClick, tokenProps, ...props }: ProfileTokenProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -49,7 +49,7 @@ interface TypeInlineProfileProps extends Omit<TypeBaseProfileProps, "name"> {
     /** The px size of the avatar, which has a default based on the size prop */
     avatarSize?: string;
 }
-interface ProfileTokenProps extends TypeInlineProfileProps {
+interface ProfileTokenProps extends Omit<TypeInlineProfileProps, "avatarUrl" | "secondaryName" | "avatarSize"> {
     /** Click handler for the entire inline profile */
     onClick?: TypeTokenProps["onClick"];
     /** Additional props to pass to the Token component */
@@ -119,8 +119,12 @@ declare const ProfileCard: ({ partnerName, name, secondaryName, avatarUrl, subte
 declare const InlineProfile: ({ name, secondaryName, partnerName, partnerLogoLabel, size, avatarSize: avatarSizeOverride, avatarUrl, verificationType, className, }: TypeInlineProfileProps) => react_jsx_runtime.JSX.Element;
 
 /**
- * A ProfileToken component that wraps CompactProfile in a Seeds Token component.
+ * A ProfileToken component that wraps InlineProfile in a Seeds Token component.
  * This token is not closable and provides a compact way to display profile information inline.
+ *
+ * ProfileToken enforces design standards by only showing the profile name and network logo.
+ * It does not support avatars, secondary names (handles), or custom avatar sizes.
+ * Use InlineProfile directly if you need more flexibility.
  */
 declare const ProfileToken: ({ className, onClick, tokenProps, ...props }: ProfileTokenProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -294,7 +294,7 @@ var InlineProfile = ({
   const displayName = name || secondaryName || "Unknown Profile";
   const avatarSize = avatarSizeOverride || avatarSizeMap[size];
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InlineProfileContainer, { className, $size: size, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineProfileAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_avatar2.Avatar, { src: avatarUrl, name: displayName, size: avatarSize }) }),
+    avatarUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineProfileAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_avatar2.Avatar, { src: avatarUrl, name: displayName, size: avatarSize }) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InlineProfileContent, { children: [
       partnerName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineProfileNetwork, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_seeds_react_partner_logo2.PartnerLogo,
@@ -327,6 +327,10 @@ var StyledProfileToken = (0, import_styled_components3.default)(import_seeds_rea
   box-sizing: border-box;
   display: inline-flex;
   max-width: 100%;
+  vertical-align: middle;
+  padding: ${(props) => props.theme.space[100]}
+    ${(props) => props.theme.space[200]};
+  margin: ${(props) => props.theme.space[100]} 0;
 `;
 var ProfileToken = ({
   className,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/ProfileCard.tsx","../src/VerifiedProfileIcon.tsx","../src/InlineProfile.tsx","../src/ProfileToken.tsx"],"sourcesContent":["export * from \"./ProfileCard\";\nexport * from \"./InlineProfile\";\nexport * from \"./ProfileToken\";\nexport * from \"./types\";\n","import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n} from \"@sproutsocial/seeds-react-card\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Link } from \"@sproutsocial/seeds-react-link\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeProfileCardProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\n// Styled Components\nconst StyledProfileCard = styled(Card)`\n  max-width: 300px;\n`;\n\nconst StyledCardHeader = styled(CardHeader)<{\n  $bannerColor?: string;\n  $partnerName?: string;\n}>`\n  position: relative;\n  height: 80px;\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]} 0 ${(props) => props.theme.space[400]};\n  margin-bottom: 0;\n  color: ${(props) => props.theme.colors.text.inverse};\n  border-radius: ${(props) => props.theme.radii[500]}\n    ${(props) => props.theme.radii[500]} 0 0;\n  ${(props) => {\n    // Use explicit bannerColor if provided\n    if (props.$bannerColor) {\n      return `background: ${props.$bannerColor};`;\n    }\n    // Fall back to theme.colors.network[partnerName] if partnerName is available\n    if (props.$partnerName && props.theme.colors.network) {\n      const networkColor =\n        props.theme.colors.network[\n          props.$partnerName as keyof typeof props.theme.colors.network\n        ];\n      return networkColor ? `background: ${networkColor};` : \"\";\n    }\n    return \"\";\n  }}\n`;\n\nconst BannerContent = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n`;\n\nconst ActionsSection = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n  padding: 0 ${(props) => props.theme.space[300]};\n\n  &:empty {\n    min-height: 44px;\n  }\n`;\n\nconst StyledCardContent = styled(CardContent)`\n  display: flex;\n  flex-direction: column;\n  gap: ${(props) => props.theme.space[300]};\n  padding: 0 ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]};\n`;\n\nconst ProfileNameSection = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n`;\n\nconst InfoRow = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n`;\n\n/**\n * A flexible profile component that can display user profiles in various formats\n * across different social networks with consistent styling and behavior.\n */\nexport const ProfileCard = ({\n  partnerName,\n  name,\n  secondaryName,\n  avatarUrl,\n  subtext,\n  description,\n  verificationType,\n  profileUrl,\n  location,\n  bannerColor,\n  bannerContent,\n  metadata,\n  profileActions,\n  footer,\n  cardProps,\n}: TypeProfileCardProps) => {\n  return (\n    <StyledProfileCard role=\"presentation\" {...cardProps}>\n      <StyledCardHeader $bannerColor={bannerColor} $partnerName={partnerName}>\n        <Avatar src={avatarUrl} name={name} size=\"60px\" mt={450} />\n        {bannerContent && <BannerContent>{bannerContent}</BannerContent>}\n      </StyledCardHeader>\n\n      <ActionsSection>{profileActions}</ActionsSection>\n\n      <StyledCardContent>\n        <ProfileNameSection>\n          {partnerName && (\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={`${partnerName} profile`}\n              size=\"small\"\n            />\n          )}\n          <Text.SubHeadline as=\"h2\">{name}</Text.SubHeadline>\n        </ProfileNameSection>\n\n        {subtext && (\n          <Text fontSize={200} color=\"text.subtext\">\n            {subtext}\n          </Text>\n        )}\n\n        {secondaryName && (\n          <InfoRow>\n            {profileUrl ? (\n              <Link href={profileUrl} external>\n                <Text fontSize={200}>{secondaryName}</Text>\n                <Icon\n                  name=\"arrow-right-up-outline\"\n                  aria-hidden\n                  ml={100}\n                  size=\"small\"\n                />\n              </Link>\n            ) : (\n              <Text.SmallByline color=\"text.subtext\">\n                {secondaryName}\n              </Text.SmallByline>\n            )}\n            {verificationType && (\n              <VerifiedProfileIcon\n                partnerName={partnerName}\n                verificationType={verificationType}\n              />\n            )}\n          </InfoRow>\n        )}\n\n        {description && <Text fontSize={200}>{description}</Text>}\n\n        {location && (\n          <InfoRow>\n            <Icon name=\"location-pin-outline\" aria-hidden size=\"small\" />\n            <Text fontSize={200}>{location}</Text>\n          </InfoRow>\n        )}\n\n        {metadata && metadata.length > 0 && (\n          <InfoRow>\n            {metadata.map((info, index) => (\n              <Text fontSize={200} key={index}>\n                {info}\n              </Text>\n            ))}\n          </InfoRow>\n        )}\n      </StyledCardContent>\n\n      {footer && <CardFooter>{footer}</CardFooter>}\n    </StyledProfileCard>\n  );\n};\n\nexport default ProfileCard;\n","import { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeProfileNetwork, TypeProfileVerification } from \"./types\";\n\n// TODO: Move these to a more appropriate location\nconst VERIFICATION_COLORS = {\n  twitter: \"#000000\",\n  facebook: \"#1877F2\",\n  x: \"#000000\",\n  linkedin: \"#0A66C2\",\n  instagram: \"#e4405f\",\n  gray: \"#515e5f\",\n} as const;\n\n/**\n * Gets the verification color based on partnerName and verification type\n */\nexport const getVerificationColor = (\n  partnerName?: TypeProfileNetwork,\n  verificationType?: TypeProfileVerification\n): string => {\n  if (!verificationType || verificationType === \"not_verified\") return \"\";\n\n  switch (verificationType) {\n    case \"blue_verified\":\n      // Use partner-specific blue color\n      return partnerName === \"facebook\"\n        ? VERIFICATION_COLORS.facebook\n        : VERIFICATION_COLORS.twitter;\n    case \"gray_verified\":\n      return VERIFICATION_COLORS.gray;\n    case \"verified\":\n    default:\n      // Default to partner color or Twitter blue\n      if (partnerName && partnerName in VERIFICATION_COLORS) {\n        return VERIFICATION_COLORS[\n          partnerName as keyof typeof VERIFICATION_COLORS\n        ];\n      }\n      return VERIFICATION_COLORS.twitter;\n  }\n};\n\nexport interface TypeVerifiedProfileIconProps {\n  partnerName?: TypeProfileNetwork;\n  verificationType: TypeProfileVerification;\n}\n\nexport const VerifiedProfileIcon = ({\n  partnerName,\n  verificationType,\n}: TypeVerifiedProfileIconProps) => {\n  if (!verificationType || verificationType === \"not_verified\") return;\n\n  const verificationColor = getVerificationColor(partnerName, verificationType);\n  return (\n    <Icon\n      title=\"Verified\"\n      aria-label=\"Verified account\"\n      color={verificationColor}\n      name=\"verified\"\n      ml=\"150\"\n    />\n  );\n};\n","import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport type { TypeInlineProfileProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\nconst InlineProfileContainer = styled.span<{\n  $size?: \"small\" | \"medium\" | \"large\";\n}>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  max-width: 100%;\n  ${(props) => props.theme.typography[200]}\n  color: ${(props) => props.theme.colors.text.subtext};\n  text-align: inherit;\n`;\n\nconst InlineProfileAvatar = styled.span`\n  display: inline-flex;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileContent = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileNetwork = styled.span`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileText = styled.span`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileName = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  text-transform: lowercase;\n  color: ${(props) => props.theme.colors.text.body};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst InlineProfileHandle = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  color: ${(props) => props.theme.colors.text.subtext};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst avatarSizeMap = {\n  small: \"16px\",\n  medium: \"20px\",\n  large: \"24px\",\n} as const;\n\n/**\n * A compact inline profile component that displays avatar, name/handle, and verification.\n * Perfect for use in post headers, comments, or other compact spaces.\n *\n * @param props - Profile props\n * @param props.name - Name of the profile\n * @param props.secondaryName - Secondary name of the profile\n * @param props.partnerName - Partner logo name\n * @param props.partnerLogoLabel - Aria-label for the partner logo\n * @param props.avatarSize - Size of the avatar\n * @param props.avatarUrl - Image URL for the avatar\n * @param props.children - Additional elements to render within the profile component\n * @returns JSX.Element representing a user profile\n *\n * @example\n * <InlineProfile\n *   name=\"John Doe\"\n *   secondaryName=\"johndoe123\"\n *   partnerName=\"facebook\"\n *   partnerLogoLabel=\"Facebook Logo\"\n *   avatarSize=\"24px\"\n *   avatarUrl=\"https://example.com/avatar.jpg\"\n * >\n *   <Badge text=\"Moderator\" badgeColor=\"green\" />\n * </InlineProfile>\n */\nexport const InlineProfile = ({\n  name,\n  secondaryName,\n  partnerName,\n  partnerLogoLabel,\n  size = \"medium\",\n  avatarSize: avatarSizeOverride,\n  avatarUrl,\n  verificationType,\n  className,\n}: TypeInlineProfileProps) => {\n  const displayName = name || secondaryName || \"Unknown Profile\";\n  const avatarSize = avatarSizeOverride || avatarSizeMap[size];\n\n  return (\n    <InlineProfileContainer className={className} $size={size}>\n      <InlineProfileAvatar>\n        <Avatar src={avatarUrl} name={displayName} size={avatarSize} />\n      </InlineProfileAvatar>\n\n      <InlineProfileContent>\n        {partnerName && (\n          <InlineProfileNetwork>\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={partnerLogoLabel || `${partnerName} profile`}\n              size=\"small\"\n            />\n          </InlineProfileNetwork>\n        )}\n\n        <InlineProfileText>\n          {name && <InlineProfileName>{name}</InlineProfileName>}\n\n          {secondaryName && (\n            <InlineProfileHandle>{secondaryName}</InlineProfileHandle>\n          )}\n        </InlineProfileText>\n\n        {verificationType && (\n          <VerifiedProfileIcon\n            partnerName={partnerName}\n            verificationType={verificationType}\n          />\n        )}\n      </InlineProfileContent>\n    </InlineProfileContainer>\n  );\n};\n","import styled from \"styled-components\";\nimport { Token } from \"@sproutsocial/seeds-react-token\";\nimport { InlineProfile } from \"./InlineProfile\";\nimport type { ProfileTokenProps } from \"./types\";\n\nconst StyledProfileToken = styled(Token)`\n  box-sizing: border-box;\n  display: inline-flex;\n  max-width: 100%;\n`;\n\n/**\n * A ProfileToken component that wraps CompactProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n */\nexport const ProfileToken = ({\n  className,\n  onClick,\n  tokenProps,\n  ...props\n}: ProfileTokenProps) => (\n  <StyledProfileToken\n    className={className}\n    closeable={false}\n    onClick={onClick}\n    {...tokenProps}\n  >\n    <InlineProfile size=\"small\" {...props} />\n  </StyledProfileToken>\n);\n\nexport default ProfileToken;\n"],"mappings":"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","names":["import_seeds_react_icon","import_jsx_runtime","styled","import_styled_components","import_seeds_react_partner_logo","import_seeds_react_avatar","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled"]}
+{"version":3,"sources":["../src/index.ts","../src/ProfileCard.tsx","../src/VerifiedProfileIcon.tsx","../src/InlineProfile.tsx","../src/ProfileToken.tsx"],"sourcesContent":["export * from \"./ProfileCard\";\nexport * from \"./InlineProfile\";\nexport * from \"./ProfileToken\";\nexport * from \"./types\";\n","import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n} from \"@sproutsocial/seeds-react-card\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Link } from \"@sproutsocial/seeds-react-link\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeProfileCardProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\n// Styled Components\nconst StyledProfileCard = styled(Card)`\n  max-width: 300px;\n`;\n\nconst StyledCardHeader = styled(CardHeader)<{\n  $bannerColor?: string;\n  $partnerName?: string;\n}>`\n  position: relative;\n  height: 80px;\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]} 0 ${(props) => props.theme.space[400]};\n  margin-bottom: 0;\n  color: ${(props) => props.theme.colors.text.inverse};\n  border-radius: ${(props) => props.theme.radii[500]}\n    ${(props) => props.theme.radii[500]} 0 0;\n  ${(props) => {\n    // Use explicit bannerColor if provided\n    if (props.$bannerColor) {\n      return `background: ${props.$bannerColor};`;\n    }\n    // Fall back to theme.colors.network[partnerName] if partnerName is available\n    if (props.$partnerName && props.theme.colors.network) {\n      const networkColor =\n        props.theme.colors.network[\n          props.$partnerName as keyof typeof props.theme.colors.network\n        ];\n      return networkColor ? `background: ${networkColor};` : \"\";\n    }\n    return \"\";\n  }}\n`;\n\nconst BannerContent = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n`;\n\nconst ActionsSection = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n  padding: 0 ${(props) => props.theme.space[300]};\n\n  &:empty {\n    min-height: 44px;\n  }\n`;\n\nconst StyledCardContent = styled(CardContent)`\n  display: flex;\n  flex-direction: column;\n  gap: ${(props) => props.theme.space[300]};\n  padding: 0 ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]};\n`;\n\nconst ProfileNameSection = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n`;\n\nconst InfoRow = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n`;\n\n/**\n * A flexible profile component that can display user profiles in various formats\n * across different social networks with consistent styling and behavior.\n */\nexport const ProfileCard = ({\n  partnerName,\n  name,\n  secondaryName,\n  avatarUrl,\n  subtext,\n  description,\n  verificationType,\n  profileUrl,\n  location,\n  bannerColor,\n  bannerContent,\n  metadata,\n  profileActions,\n  footer,\n  cardProps,\n}: TypeProfileCardProps) => {\n  return (\n    <StyledProfileCard role=\"presentation\" {...cardProps}>\n      <StyledCardHeader $bannerColor={bannerColor} $partnerName={partnerName}>\n        <Avatar src={avatarUrl} name={name} size=\"60px\" mt={450} />\n        {bannerContent && <BannerContent>{bannerContent}</BannerContent>}\n      </StyledCardHeader>\n\n      <ActionsSection>{profileActions}</ActionsSection>\n\n      <StyledCardContent>\n        <ProfileNameSection>\n          {partnerName && (\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={`${partnerName} profile`}\n              size=\"small\"\n            />\n          )}\n          <Text.SubHeadline as=\"h2\">{name}</Text.SubHeadline>\n        </ProfileNameSection>\n\n        {subtext && (\n          <Text fontSize={200} color=\"text.subtext\">\n            {subtext}\n          </Text>\n        )}\n\n        {secondaryName && (\n          <InfoRow>\n            {profileUrl ? (\n              <Link href={profileUrl} external>\n                <Text fontSize={200}>{secondaryName}</Text>\n                <Icon\n                  name=\"arrow-right-up-outline\"\n                  aria-hidden\n                  ml={100}\n                  size=\"small\"\n                />\n              </Link>\n            ) : (\n              <Text.SmallByline color=\"text.subtext\">\n                {secondaryName}\n              </Text.SmallByline>\n            )}\n            {verificationType && (\n              <VerifiedProfileIcon\n                partnerName={partnerName}\n                verificationType={verificationType}\n              />\n            )}\n          </InfoRow>\n        )}\n\n        {description && <Text fontSize={200}>{description}</Text>}\n\n        {location && (\n          <InfoRow>\n            <Icon name=\"location-pin-outline\" aria-hidden size=\"small\" />\n            <Text fontSize={200}>{location}</Text>\n          </InfoRow>\n        )}\n\n        {metadata && metadata.length > 0 && (\n          <InfoRow>\n            {metadata.map((info, index) => (\n              <Text fontSize={200} key={index}>\n                {info}\n              </Text>\n            ))}\n          </InfoRow>\n        )}\n      </StyledCardContent>\n\n      {footer && <CardFooter>{footer}</CardFooter>}\n    </StyledProfileCard>\n  );\n};\n\nexport default ProfileCard;\n","import { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeProfileNetwork, TypeProfileVerification } from \"./types\";\n\n// TODO: Move these to a more appropriate location\nconst VERIFICATION_COLORS = {\n  twitter: \"#000000\",\n  facebook: \"#1877F2\",\n  x: \"#000000\",\n  linkedin: \"#0A66C2\",\n  instagram: \"#e4405f\",\n  gray: \"#515e5f\",\n} as const;\n\n/**\n * Gets the verification color based on partnerName and verification type\n */\nexport const getVerificationColor = (\n  partnerName?: TypeProfileNetwork,\n  verificationType?: TypeProfileVerification\n): string => {\n  if (!verificationType || verificationType === \"not_verified\") return \"\";\n\n  switch (verificationType) {\n    case \"blue_verified\":\n      // Use partner-specific blue color\n      return partnerName === \"facebook\"\n        ? VERIFICATION_COLORS.facebook\n        : VERIFICATION_COLORS.twitter;\n    case \"gray_verified\":\n      return VERIFICATION_COLORS.gray;\n    case \"verified\":\n    default:\n      // Default to partner color or Twitter blue\n      if (partnerName && partnerName in VERIFICATION_COLORS) {\n        return VERIFICATION_COLORS[\n          partnerName as keyof typeof VERIFICATION_COLORS\n        ];\n      }\n      return VERIFICATION_COLORS.twitter;\n  }\n};\n\nexport interface TypeVerifiedProfileIconProps {\n  partnerName?: TypeProfileNetwork;\n  verificationType: TypeProfileVerification;\n}\n\nexport const VerifiedProfileIcon = ({\n  partnerName,\n  verificationType,\n}: TypeVerifiedProfileIconProps) => {\n  if (!verificationType || verificationType === \"not_verified\") return;\n\n  const verificationColor = getVerificationColor(partnerName, verificationType);\n  return (\n    <Icon\n      title=\"Verified\"\n      aria-label=\"Verified account\"\n      color={verificationColor}\n      name=\"verified\"\n      ml=\"150\"\n    />\n  );\n};\n","import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport type { TypeInlineProfileProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\nconst InlineProfileContainer = styled.span<{\n  $size?: \"small\" | \"medium\" | \"large\";\n}>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  max-width: 100%;\n  ${(props) => props.theme.typography[200]}\n  color: ${(props) => props.theme.colors.text.subtext};\n  text-align: inherit;\n`;\n\nconst InlineProfileAvatar = styled.span`\n  display: inline-flex;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileContent = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileNetwork = styled.span`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileText = styled.span`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileName = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  text-transform: lowercase;\n  color: ${(props) => props.theme.colors.text.body};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst InlineProfileHandle = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  color: ${(props) => props.theme.colors.text.subtext};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst avatarSizeMap = {\n  small: \"16px\",\n  medium: \"20px\",\n  large: \"24px\",\n} as const;\n\n/**\n * A compact inline profile component that displays avatar, name/handle, and verification.\n * Perfect for use in post headers, comments, or other compact spaces.\n *\n * @param props - Profile props\n * @param props.name - Name of the profile\n * @param props.secondaryName - Secondary name of the profile\n * @param props.partnerName - Partner logo name\n * @param props.partnerLogoLabel - Aria-label for the partner logo\n * @param props.avatarSize - Size of the avatar\n * @param props.avatarUrl - Image URL for the avatar\n * @param props.children - Additional elements to render within the profile component\n * @returns JSX.Element representing a user profile\n *\n * @example\n * <InlineProfile\n *   name=\"John Doe\"\n *   secondaryName=\"johndoe123\"\n *   partnerName=\"facebook\"\n *   partnerLogoLabel=\"Facebook Logo\"\n *   avatarSize=\"24px\"\n *   avatarUrl=\"https://example.com/avatar.jpg\"\n * >\n *   <Badge text=\"Moderator\" badgeColor=\"green\" />\n * </InlineProfile>\n */\nexport const InlineProfile = ({\n  name,\n  secondaryName,\n  partnerName,\n  partnerLogoLabel,\n  size = \"medium\",\n  avatarSize: avatarSizeOverride,\n  avatarUrl,\n  verificationType,\n  className,\n}: TypeInlineProfileProps) => {\n  const displayName = name || secondaryName || \"Unknown Profile\";\n  const avatarSize = avatarSizeOverride || avatarSizeMap[size];\n\n  return (\n    <InlineProfileContainer className={className} $size={size}>\n      {avatarUrl && (\n        <InlineProfileAvatar>\n          <Avatar src={avatarUrl} name={displayName} size={avatarSize} />\n        </InlineProfileAvatar>\n      )}\n\n      <InlineProfileContent>\n        {partnerName && (\n          <InlineProfileNetwork>\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={partnerLogoLabel || `${partnerName} profile`}\n              size=\"small\"\n            />\n          </InlineProfileNetwork>\n        )}\n\n        <InlineProfileText>\n          {name && <InlineProfileName>{name}</InlineProfileName>}\n\n          {secondaryName && (\n            <InlineProfileHandle>{secondaryName}</InlineProfileHandle>\n          )}\n        </InlineProfileText>\n\n        {verificationType && (\n          <VerifiedProfileIcon\n            partnerName={partnerName}\n            verificationType={verificationType}\n          />\n        )}\n      </InlineProfileContent>\n    </InlineProfileContainer>\n  );\n};\n","import styled from \"styled-components\";\nimport { Token } from \"@sproutsocial/seeds-react-token\";\nimport { InlineProfile } from \"./InlineProfile\";\nimport type { ProfileTokenProps } from \"./types\";\n\nconst StyledProfileToken = styled(Token)`\n  box-sizing: border-box;\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: middle;\n  padding: ${(props) => props.theme.space[100]}\n    ${(props) => props.theme.space[200]};\n  margin: ${(props) => props.theme.space[100]} 0;\n`;\n\n/**\n * A ProfileToken component that wraps InlineProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n *\n * ProfileToken enforces design standards by only showing the profile name and network logo.\n * It does not support avatars, secondary names (handles), or custom avatar sizes.\n * Use InlineProfile directly if you need more flexibility.\n */\nexport const ProfileToken = ({\n  className,\n  onClick,\n  tokenProps,\n  ...props\n}: ProfileTokenProps) => (\n  <StyledProfileToken\n    className={className}\n    closeable={false}\n    onClick={onClick}\n    {...tokenProps}\n  >\n    <InlineProfile size=\"small\" {...props} />\n  </StyledProfileToken>\n);\n\nexport default ProfileToken;\n"],"mappings":"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","names":["import_seeds_react_icon","import_jsx_runtime","styled","import_styled_components","import_seeds_react_partner_logo","import_seeds_react_avatar","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-profile",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Seeds React Profile",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/InlineProfile.stories.tsx

@@ -152,3 +152,36 @@ export const LongNamesTruncation: Story = {
     </div>
   ),
 };
+
+export const WithoutAvatarUrl: Story = {
+  args: {
+    name: "John Doe",
+    secondaryName: "@johndoe",
+    partnerName: "twitter",
+    // No avatarUrl provided
+  },
+};
+
+export const CompareAvatarUrlPresence: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ padding: "8px", border: "1px solid #ccc" }}>
+        <h4 style={{ margin: "0 0 8px 0" }}>Without Avatar URL</h4>
+        <InlineProfile
+          name="John Doe"
+          secondaryName="@johndoe"
+          partnerName="twitter"
+        />
+      </div>
+      <div style={{ padding: "8px", border: "1px solid #ccc" }}>
+        <h4 style={{ margin: "0 0 8px 0" }}>With Avatar URL</h4>
+        <InlineProfile
+          name="John Doe"
+          secondaryName="@johndoe"
+          partnerName="twitter"
+          avatarUrl={avatarUrl}
+        />
+      </div>
+    </div>
+  ),
+};

package/src/InlineProfile.tsx

@@ -117,9 +117,11 @@ export const InlineProfile = ({
 
   return (
     <InlineProfileContainer className={className} $size={size}>
-      <InlineProfileAvatar>
-        <Avatar src={avatarUrl} name={displayName} size={avatarSize} />
-      </InlineProfileAvatar>
+      {avatarUrl && (
+        <InlineProfileAvatar>
+          <Avatar src={avatarUrl} name={displayName} size={avatarSize} />
+        </InlineProfileAvatar>
+      )}
 
       <InlineProfileContent>
         {partnerName && (

package/src/ProfileToken.stories.tsx

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ProfileToken } from "./ProfileToken";
 
-const avatarUrl =
-  "https://d672eyudr6aq1.cloudfront.net/avatar/cede1373e17c05542b1cc60f427067f2?s=30&d=404";
-
 const meta: Meta<typeof ProfileToken> = {
   title: "Components/Profile/ProfileToken",
   component: ProfileToken,
@@ -38,8 +35,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     name: "John Doe",
-    secondaryName: "@johndoe",
-    avatarUrl: avatarUrl,
     partnerName: "twitter",
   },
 };
@@ -47,8 +42,6 @@ export const Default: Story = {
 export const WithVerification: Story = {
   args: {
     name: "Elon Musk",
-    secondaryName: "@elonmusk",
-    avatarUrl: avatarUrl,
     partnerName: "twitter",
     verificationType: "verified",
   },
@@ -57,8 +50,6 @@ export const WithVerification: Story = {
 export const FacebookUser: Story = {
   args: {
     name: "Facebook User",
-    secondaryName: "/facebookuser",
-    avatarUrl: avatarUrl,
     partnerName: "facebook",
   },
 };
@@ -66,8 +57,6 @@ export const FacebookUser: Story = {
 export const InstagramUser: Story = {
   args: {
     name: "Instagram User",
-    secondaryName: "@instagramuser",
-    avatarUrl: avatarUrl,
     partnerName: "instagram",
   },
 };
@@ -75,8 +64,6 @@ export const InstagramUser: Story = {
 export const LinkedInUser: Story = {
   args: {
     name: "LinkedIn User",
-    secondaryName: "linkedinuser",
-    avatarUrl: avatarUrl,
     partnerName: "linkedin",
   },
 };
@@ -84,8 +71,6 @@ export const LinkedInUser: Story = {
 export const YouTubeUser: Story = {
   args: {
     name: "YouTube Creator",
-    secondaryName: "@youtubecreator",
-    avatarUrl: avatarUrl,
     partnerName: "youtube",
   },
 };
@@ -93,8 +78,6 @@ export const YouTubeUser: Story = {
 export const TikTokUser: Story = {
   args: {
     name: "TikTok Creator",
-    secondaryName: "@tiktokcreator",
-    avatarUrl: avatarUrl,
     partnerName: "tiktok",
   },
 };
@@ -102,8 +85,6 @@ export const TikTokUser: Story = {
 export const ThreadsUser: Story = {
   args: {
     name: "Threads User",
-    secondaryName: "@threadsuser",
-    avatarUrl: avatarUrl,
     partnerName: "threads",
   },
 };
@@ -111,26 +92,14 @@ export const ThreadsUser: Story = {
 export const BlueskyUser: Story = {
   args: {
     name: "Bluesky User",
-    secondaryName: "@blueskyuser",
-    avatarUrl: avatarUrl,
     partnerName: "bluesky",
   },
 };
 
-export const WithoutAvatar: Story = {
-  args: {
-    name: "No Avatar User",
-    secondaryName: "@noavat,ar",
-    partnerName: "twitter",
-  },
-};
-
 export const BlueVerifiedUser: Story = {
   args: {
     name: "Blue Verified User",
-    secondaryName: "@blueverified",
     partnerName: "twitter",
-    avatarUrl: "https://via.placeholder.com/40",
     verificationType: "blue_verified",
   },
 };
@@ -138,42 +107,12 @@ export const BlueVerifiedUser: Story = {
 export const DifferentNetworks: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-      <ProfileToken
-        name="Twitter User"
-        secondaryName="@twitteruser"
-        avatarUrl={avatarUrl}
-        partnerName="twitter"
-      />
-      <ProfileToken
-        name="Facebook User"
-        secondaryName="/facebookuser"
-        avatarUrl={avatarUrl}
-        partnerName="facebook"
-      />
-      <ProfileToken
-        name="Instagram User"
-        secondaryName="@instagramuser"
-        avatarUrl={avatarUrl}
-        partnerName="instagram"
-      />
-      <ProfileToken
-        name="LinkedIn User"
-        secondaryName="linkedinuser"
-        avatarUrl={avatarUrl}
-        partnerName="linkedin"
-      />
-      <ProfileToken
-        name="YouTube Creator"
-        secondaryName="@youtubecreator"
-        avatarUrl={avatarUrl}
-        partnerName="youtube"
-      />
-      <ProfileToken
-        name="TikTok Creator"
-        secondaryName="@tiktokcreator"
-        avatarUrl={avatarUrl}
-        partnerName="tiktok"
-      />
+      <ProfileToken name="Twitter User" partnerName="twitter" />
+      <ProfileToken name="Facebook User" partnerName="facebook" />
+      <ProfileToken name="Instagram User" partnerName="instagram" />
+      <ProfileToken name="LinkedIn User" partnerName="linkedin" />
+      <ProfileToken name="YouTube Creator" partnerName="youtube" />
+      <ProfileToken name="TikTok Creator" partnerName="tiktok" />
     </div>
   ),
 };
@@ -183,41 +122,14 @@ export const TokenVariations: Story = {
     <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
       <ProfileToken
         name="Verified User"
-        secondaryName="@verified"
-        avatarUrl={avatarUrl}
         partnerName="twitter"
         verificationType="verified"
       />
-      <ProfileToken
-        name="Regular User"
-        secondaryName="@regular"
-        avatarUrl={avatarUrl}
-        partnerName="twitter"
-      />
-      <ProfileToken
-        name="Facebook User"
-        secondaryName="/facebookuser"
-        avatarUrl={avatarUrl}
-        partnerName="facebook"
-      />
-      <ProfileToken
-        name="Instagram User"
-        secondaryName="@instagramuser"
-        avatarUrl={avatarUrl}
-        partnerName="instagram"
-      />
-      <ProfileToken
-        name="LinkedIn User"
-        secondaryName="linkedinuser"
-        avatarUrl={avatarUrl}
-        partnerName="linkedin"
-      />
-      <ProfileToken
-        name="YouTube Creator"
-        secondaryName="@youtubecreator"
-        avatarUrl={avatarUrl}
-        partnerName="youtube"
-      />
+      <ProfileToken name="Regular User" partnerName="twitter" />
+      <ProfileToken name="Facebook User" partnerName="facebook" />
+      <ProfileToken name="Instagram User" partnerName="instagram" />
+      <ProfileToken name="LinkedIn User" partnerName="linkedin" />
+      <ProfileToken name="YouTube Creator" partnerName="youtube" />
     </div>
   ),
 };
@@ -230,30 +142,18 @@ export const LongNamesTruncation: Story = {
       >
         <ProfileToken
           name="A Very Long User Name That Should Truncate"
-          secondaryName="@verylonghandlethatshouldalsotruncate"
-          avatarUrl={avatarUrl}
           partnerName="twitter"
         />
       </div>
       <div
         style={{ maxWidth: "180px", border: "1px solid #ccc", padding: "8px" }}
       >
-        <ProfileToken
-          name="Another Long Name Token"
-          secondaryName="@anotherlonghandle"
-          avatarUrl={avatarUrl}
-          partnerName="facebook"
-        />
+        <ProfileToken name="Another Long Name Token" partnerName="facebook" />
       </div>
       <div
         style={{ maxWidth: "120px", border: "1px solid #ccc", padding: "8px" }}
       >
-        <ProfileToken
-          name="Very Narrow Token"
-          secondaryName="@narrow"
-          avatarUrl={avatarUrl}
-          partnerName="instagram"
-        />
+        <ProfileToken name="Very Narrow Token" partnerName="instagram" />
       </div>
     </div>
   ),

package/src/ProfileToken.tsx

@@ -7,11 +7,19 @@ const StyledProfileToken = styled(Token)`
   box-sizing: border-box;
   display: inline-flex;
   max-width: 100%;
+  vertical-align: middle;
+  padding: ${(props) => props.theme.space[100]}
+    ${(props) => props.theme.space[200]};
+  margin: ${(props) => props.theme.space[100]} 0;
 `;
 
 /**
- * A ProfileToken component that wraps CompactProfile in a Seeds Token component.
+ * A ProfileToken component that wraps InlineProfile in a Seeds Token component.
  * This token is not closable and provides a compact way to display profile information inline.
+ *
+ * ProfileToken enforces design standards by only showing the profile name and network logo.
+ * It does not support avatars, secondary names (handles), or custom avatar sizes.
+ * Use InlineProfile directly if you need more flexibility.
  */
 export const ProfileToken = ({
   className,

package/src/__tests__/InlineProfile.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { InlineProfile } from "../InlineProfile";
 
@@ -59,11 +58,13 @@ describe("InlineProfile", () => {
     expect(screen.queryByText(/@/)).not.toBeInTheDocument();
   });
 
-  it("renders avatar with name fallback when avatarUrl prop is not provided", () => {
+  it("hides avatar when avatarUrl prop is not provided", () => {
     render(<InlineProfile name="John Doe" />);
 
-    const avatar = screen.getByText("JD");
-    expect(avatar).toBeInTheDocument();
+    // Avatar should not be rendered when no URL provided
+    expect(screen.queryByText("JD")).not.toBeInTheDocument();
+    // But name should still be visible
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
   });
 
   it("renders with verification badge when verified", () => {

package/src/__tests__/ProfileToken.test.tsx

@@ -1,26 +1,20 @@
-import React from "react";
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { ProfileToken } from "../ProfileToken";
 
 describe("ProfileToken", () => {
-  const mockProfileData = {
-    name: "John Doe",
-    secondaryName: "@johndoe",
-    partnerName: "twitter" as const,
-    avatarUrl: "https://example.com/avatar.jpg",
-    verificationType: "verified" as const,
-  };
-
   it("renders profile information in token format", () => {
-    render(<ProfileToken {...mockProfileData} />);
+    render(<ProfileToken name="John Doe" partnerName="twitter" />);
 
     expect(screen.getByText("John Doe")).toBeInTheDocument();
-    expect(screen.getByText("@johndoe")).toBeInTheDocument();
   });
 
   it("applies custom className", () => {
     const { container } = render(
-      <ProfileToken {...mockProfileData} className="custom-token" />
+      <ProfileToken
+        name="John Doe"
+        partnerName="twitter"
+        className="custom-token"
+      />
     );
 
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -28,7 +22,9 @@ describe("ProfileToken", () => {
   });
 
   it("renders without close button", () => {
-    const { container } = render(<ProfileToken {...mockProfileData} />);
+    const { container } = render(
+      <ProfileToken name="John Doe" partnerName="twitter" />
+    );
 
     // Check that no close button elements are present
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -46,7 +42,11 @@ describe("ProfileToken", () => {
 
   it("passes tokenProps to Token component", () => {
     const { container } = render(
-      <ProfileToken {...mockProfileData} tokenProps={{ id: "custom-token" }} />
+      <ProfileToken
+        name="John Doe"
+        partnerName="twitter"
+        tokenProps={{ id: "custom-token" }}
+      />
     );
 
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access

package/src/types.ts

@@ -75,7 +75,11 @@ export interface TypeInlineProfileProps
   avatarSize?: string;
 }
 
-export interface ProfileTokenProps extends TypeInlineProfileProps {
+export interface ProfileTokenProps
+  extends Omit<
+    TypeInlineProfileProps,
+    "avatarUrl" | "secondaryName" | "avatarSize"
+  > {
   /** Click handler for the entire inline profile */
   onClick?: TypeTokenProps["onClick"];
   /** Additional props to pass to the Token component */