@sproutsocial/seeds-react-profile 0.3.34 → 0.3.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,14 +8,14 @@ $ tsup --dts
8
8
  CLI Cleaning output folder
9
9
  CJS Build start
10
10
  ESM Build start
11
- CJS dist/index.js 13.36 KB
12
- CJS dist/index.js.map 18.67 KB
13
- CJS ⚡️ Build success in 16ms
14
- ESM dist/esm/index.js 9.76 KB
15
- ESM dist/esm/index.js.map 18.52 KB
16
- ESM ⚡️ Build success in 16ms
11
+ CJS dist/index.js 13.34 KB
12
+ CJS dist/index.js.map 18.60 KB
13
+ CJS ⚡️ Build success in 18ms
14
+ ESM dist/esm/index.js 9.74 KB
15
+ ESM dist/esm/index.js.map 18.46 KB
16
+ ESM ⚡️ Build success in 19ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 2189ms
18
+ DTS ⚡️ Build success in 1895ms
19
19
  DTS dist/index.d.ts 5.82 KB
20
20
  DTS dist/index.d.mts 5.82 KB
21
- Done in 3.18s.
21
+ Done in 2.76s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,46 @@
1
1
  # @sproutsocial/seeds-react-profile
2
2
 
3
+ ## 0.3.36
4
+
5
+ ### Patch Changes
6
+
7
+ - 65b5879: Complete the Tailwind migration of `Text` by converting the seven typographic
8
+ sub-components (`Text.Headline`, `Text.SubHeadline`, `Text.SmallSubHeadline`,
9
+ `Text.Byline`, `Text.SmallByline`, `Text.BodyCopy`, `Text.SmallBodyCopy`) from
10
+ `styled(Container)` styled-components to the Tailwind path.
11
+
12
+ Each sub-component now renders the base hybrid `Text` with a Seeds variant class
13
+ that maps the original color, weight, and typography size to CSS custom
14
+ properties. The variant classes are also usable directly on any element, e.g.:
15
+
16
+ ```tsx
17
+ <p className="seeds-text seeds-text-body">Some body text</p>
18
+ <h2 className="seeds-text seeds-text-headline">Some headline text</h2>
19
+ ```
20
+
21
+ New classes: `seeds-text-headline`, `seeds-text-subheadline`,
22
+ `seeds-text-small-subheadline`, `seeds-text-byline`, `seeds-text-small-byline`,
23
+ `seeds-text-body`, `seeds-text-small-body`. The public `Text.*` API and the
24
+ `TypeTextComponent` interface are unchanged.
25
+
26
+ - Updated dependencies [65b5879]
27
+ - Updated dependencies [0e113bc]
28
+ - @sproutsocial/seeds-react-text@1.5.0
29
+ - @sproutsocial/seeds-react-token@1.5.8
30
+ - @sproutsocial/seeds-react-avatar@1.1.18
31
+ - @sproutsocial/seeds-react-link@1.1.14
32
+
33
+ ## 0.3.35
34
+
35
+ ### Patch Changes
36
+
37
+ - @sproutsocial/seeds-react-avatar@1.1.17
38
+ - @sproutsocial/seeds-react-card@1.1.43
39
+ - @sproutsocial/seeds-react-icon@2.4.1
40
+ - @sproutsocial/seeds-react-link@1.1.13
41
+ - @sproutsocial/seeds-react-partner-logo@1.7.14
42
+ - @sproutsocial/seeds-react-token@1.5.7
43
+
3
44
  ## 0.3.34
4
45
 
5
46
  ### Patch Changes
package/dist/esm/index.js CHANGED
@@ -161,7 +161,7 @@ var ProfileCard = ({
161
161
  size: "small"
162
162
  }
163
163
  )
164
- ] }) : /* @__PURE__ */ jsx2(Text.SmallByline, { color: "text.subtext", children: secondaryName }),
164
+ ] }) : /* @__PURE__ */ jsx2(Text.SmallByline, { children: secondaryName }),
165
165
  verificationType && /* @__PURE__ */ jsx2(
166
166
  VerifiedProfileIcon,
167
167
  {
@@ -1 +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 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"]}
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>{secondaryName}</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 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":";AAAA,OAAO,YAAY;AACnB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAAA,aAAY;AACrB,SAAS,YAAY;AACrB,SAAS,YAAY;;;ACXrB,SAAS,YAAY;AAuDjB;AAnDJ,IAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,GAAG;AAAA,EACH,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AACR;AAKO,IAAM,uBAAuB,CAClC,aACA,qBACW;AACX,MAAI,CAAC,oBAAoB,qBAAqB,eAAgB,QAAO;AAErE,UAAQ,kBAAkB;AAAA,IACxB,KAAK;AAEH,aAAO,gBAAgB,aACnB,oBAAoB,WACpB,oBAAoB;AAAA,IAC1B,KAAK;AACH,aAAO,oBAAoB;AAAA,IAC7B,KAAK;AAAA,IACL;AAEE,UAAI,eAAe,eAAe,qBAAqB;AACrD,eAAO,oBACL,WACF;AAAA,MACF;AACA,aAAO,oBAAoB;AAAA,EAC/B;AACF;AAOO,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAoC;AAClC,MAAI,CAAC,oBAAoB,qBAAqB,eAAgB;AAE9D,QAAM,oBAAoB,qBAAqB,aAAa,gBAAgB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,cAAW;AAAA,MACX,OAAO;AAAA,MACP,MAAK;AAAA,MACL,IAAG;AAAA;AAAA,EACL;AAEJ;;;AD8CM,SACE,OAAAC,MADF;AA7FN,IAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAIrC,IAAM,mBAAmB,OAAO,UAAU;AAAA;AAAA;AAAA,aAM7B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,MACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,WAEnE,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA,mBAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,MAC9C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,IACnC,CAAC,UAAU;AAEX,MAAI,MAAM,cAAc;AACtB,WAAO,eAAe,MAAM,YAAY;AAAA,EAC1C;AAEA,MAAI,MAAM,gBAAgB,MAAM,MAAM,OAAO,SAAS;AACpD,UAAM,eACJ,MAAM,MAAM,OAAO,QACjB,MAAM,YACR;AACF,WAAO,eAAe,eAAe,YAAY,MAAM;AAAA,EACzD;AACA,SAAO;AACT,CAAC;AAAA;AAGH,IAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM7B,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,SAGrB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,eAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,IAAM,oBAAoB,OAAO,WAAW;AAAA;AAAA;AAAA,SAGnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,eAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,MAC1C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGvC,IAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA,SAGzB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAG1C,IAAM,UAAU,OAAO;AAAA;AAAA;AAAA,SAGd,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAOnC,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,SACE,qBAAC,qBAAkB,MAAK,gBAAgB,GAAG,WACzC;AAAA,yBAAC,oBAAiB,cAAc,aAAa,cAAc,aACzD;AAAA,sBAAAA,KAAC,UAAO,KAAK,WAAW,MAAY,MAAK,QAAO,IAAI,KAAK;AAAA,MACxD,iBAAiB,gBAAAA,KAAC,iBAAe,yBAAc;AAAA,OAClD;AAAA,IAEA,gBAAAA,KAAC,kBAAgB,0BAAe;AAAA,IAEhC,qBAAC,qBACC;AAAA,2BAAC,sBACE;AAAA,uBACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY,GAAG,WAAW;AAAA,YAC1B,MAAK;AAAA;AAAA,QACP;AAAA,QAEF,gBAAAA,KAAC,KAAK,aAAL,EAAiB,IAAG,MAAM,gBAAK;AAAA,SAClC;AAAA,MAEC,WACC,gBAAAA,KAAC,QAAK,UAAU,KAAK,OAAM,gBACxB,mBACH;AAAA,MAGD,iBACC,qBAAC,WACE;AAAA,qBACC,qBAAC,QAAK,MAAM,YAAY,UAAQ,MAC9B;AAAA,0BAAAA,KAAC,QAAK,UAAU,KAAM,yBAAc;AAAA,UACpC,gBAAAA;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAW;AAAA,cACX,IAAI;AAAA,cACJ,MAAK;AAAA;AAAA,UACP;AAAA,WACF,IAEA,gBAAAD,KAAC,KAAK,aAAL,EAAkB,yBAAc;AAAA,QAElC,oBACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SAEJ;AAAA,MAGD,eAAe,gBAAAA,KAAC,QAAK,UAAU,KAAM,uBAAY;AAAA,MAEjD,YACC,qBAAC,WACC;AAAA,wBAAAA,KAACC,OAAA,EAAK,MAAK,wBAAuB,eAAW,MAAC,MAAK,SAAQ;AAAA,QAC3D,gBAAAD,KAAC,QAAK,UAAU,KAAM,oBAAS;AAAA,SACjC;AAAA,MAGD,YAAY,SAAS,SAAS,KAC7B,gBAAAA,KAAC,WACE,mBAAS,IAAI,CAAC,MAAM,UACnB,gBAAAA,KAAC,QAAK,UAAU,KACb,kBADuB,KAE1B,CACD,GACH;AAAA,OAEJ;AAAA,IAEC,UAAU,gBAAAA,KAAC,cAAY,kBAAO;AAAA,KACjC;AAEJ;;;AErLA,OAAOE,aAAY;AACnB,SAAS,eAAAC,oBAAmB;AAC5B,SAAS,UAAAC,eAAc;AAsHb,gBAAAC,MAeF,QAAAC,aAfE;AAlHV,IAAM,yBAAyBC,QAAO;AAAA;AAAA;AAAA;AAAA,SAM7B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,IAEtC,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA;AAAA;AAIrD,IAAM,sBAAsBA,QAAO;AAAA;AAAA;AAAA;AAKnC,IAAM,uBAAuBA,QAAO;AAAA;AAAA;AAAA,SAG3B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAK1C,IAAM,uBAAuBA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMpC,IAAM,oBAAoBA,QAAO;AAAA;AAAA;AAAA;AAAA,SAIxB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAK1C,IAAM,oBAAoBA,QAAO;AAAA;AAAA,IAE7B,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,iBACjC,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,WACjD,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlD,IAAM,sBAAsBA,QAAO;AAAA;AAAA,IAE/B,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,WACvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,IAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AA4BO,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,cAAc,QAAQ,iBAAiB;AAC7C,QAAM,aAAa,sBAAsB,cAAc,IAAI;AAE3D,SACE,gBAAAD,MAAC,0BAAuB,WAAsB,OAAO,MAClD;AAAA,iBACC,gBAAAD,KAAC,uBACC,0BAAAA,KAACG,SAAA,EAAO,KAAK,WAAW,MAAM,aAAa,MAAM,YAAY,GAC/D;AAAA,IAGF,gBAAAF,MAAC,wBACE;AAAA,qBACC,gBAAAD,KAAC,wBACC,0BAAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACC;AAAA,UACA,cAAY,oBAAoB,GAAG,WAAW;AAAA,UAC9C,MAAK;AAAA;AAAA,MACP,GACF;AAAA,MAGF,gBAAAH,MAAC,qBACE;AAAA,gBAAQ,gBAAAD,KAAC,qBAAmB,gBAAK;AAAA,QAEjC,iBACC,gBAAAA,KAAC,uBAAqB,yBAAc;AAAA,SAExC;AAAA,MAEC,oBACC,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,OAEJ;AAAA,KACF;AAEJ;;;ACxJA,OAAOK,aAAY;AACnB,SAAS,aAAa;AAkClB,gBAAAC,YAAA;AA9BJ,IAAM,qBAAqBC,QAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,aAK1B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,MACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAWtC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,gBAAAD;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACC,GAAG;AAAA,IAEJ,0BAAAA,KAAC,iBAAc,MAAK,SAAS,GAAG,OAAO;AAAA;AACzC;","names":["Icon","jsx","Icon","styled","PartnerLogo","Avatar","jsx","jsxs","styled","Avatar","PartnerLogo","styled","jsx","styled"]}
package/dist/index.js CHANGED
@@ -194,7 +194,7 @@ var ProfileCard = ({
194
194
  size: "small"
195
195
  }
196
196
  )
197
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text.SmallByline, { color: "text.subtext", children: secondaryName }),
197
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text.SmallByline, { children: secondaryName }),
198
198
  verificationType && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
199
199
  VerifiedProfileIcon,
200
200
  {
package/dist/index.js.map CHANGED
@@ -1 +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 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"]}
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>{secondaryName}</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 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-profile",
3
- "version": "0.3.34",
3
+ "version": "0.3.36",
4
4
  "description": "Seeds React Profile",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -20,13 +20,13 @@
20
20
  "lint:fix": "eslint --fix"
21
21
  },
22
22
  "dependencies": {
23
- "@sproutsocial/seeds-react-avatar": "^1.1.16",
24
- "@sproutsocial/seeds-react-card": "^1.1.42",
25
- "@sproutsocial/seeds-react-icon": "^2.4.0",
26
- "@sproutsocial/seeds-react-link": "^1.1.12",
27
- "@sproutsocial/seeds-react-partner-logo": "^1.7.13",
28
- "@sproutsocial/seeds-react-text": "^1.4.3",
29
- "@sproutsocial/seeds-react-token": "^1.5.6"
23
+ "@sproutsocial/seeds-react-avatar": "^1.1.18",
24
+ "@sproutsocial/seeds-react-card": "^1.1.43",
25
+ "@sproutsocial/seeds-react-icon": "^2.4.1",
26
+ "@sproutsocial/seeds-react-link": "^1.1.14",
27
+ "@sproutsocial/seeds-react-partner-logo": "^1.7.14",
28
+ "@sproutsocial/seeds-react-text": "^1.5.0",
29
+ "@sproutsocial/seeds-react-token": "^1.5.8"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@types/react": "^18.0.0",
@@ -145,9 +145,7 @@ export const ProfileCard = ({
145
145
  />
146
146
  </Link>
147
147
  ) : (
148
- <Text.SmallByline color="text.subtext">
149
- {secondaryName}
150
- </Text.SmallByline>
148
+ <Text.SmallByline>{secondaryName}</Text.SmallByline>
151
149
  )}
152
150
  {verificationType && (
153
151
  <VerifiedProfileIcon