@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.
- package/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +41 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
- package/src/ProfileCard.tsx +1 -3
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m13.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m18.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m9.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m18.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m13.34 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m18.60 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 18ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m9.74 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m18.46 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 19ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 1895ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m5.82 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m5.82 KB[39m
|
|
21
|
-
Done in
|
|
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, {
|
|
164
|
+
] }) : /* @__PURE__ */ jsx2(Text.SmallByline, { children: secondaryName }),
|
|
165
165
|
verificationType && /* @__PURE__ */ jsx2(
|
|
166
166
|
VerifiedProfileIcon,
|
|
167
167
|
{
|
package/dist/esm/index.js.map
CHANGED
|
@@ -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":"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","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, {
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,+BAAmB;AACnB,sCAA4B;AAC5B,gCAAuB;AACvB,8BAKO;AACP,IAAAA,2BAAqB;AACrB,8BAAqB;AACrB,8BAAqB;;;ACXrB,8BAAqB;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,IAAAC,sBAAA;AA7FN,IAAM,wBAAoB,yBAAAC,SAAO,4BAAI;AAAA;AAAA;AAIrC,IAAM,uBAAmB,yBAAAA,SAAO,kCAAU;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,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAM7B,IAAM,iBAAiB,yBAAAA,QAAO;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,wBAAoB,yBAAAA,SAAO,mCAAW;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,yBAAAA,QAAO;AAAA;AAAA;AAAA,SAGzB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAG1C,IAAM,UAAU,yBAAAA,QAAO;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,8CAAC,qBAAkB,MAAK,gBAAgB,GAAG,WACzC;AAAA,kDAAC,oBAAiB,cAAc,aAAa,cAAc,aACzD;AAAA,mDAAC,oCAAO,KAAK,WAAW,MAAY,MAAK,QAAO,IAAI,KAAK;AAAA,MACxD,iBAAiB,6CAAC,iBAAe,yBAAc;AAAA,OAClD;AAAA,IAEA,6CAAC,kBAAgB,0BAAe;AAAA,IAEhC,8CAAC,qBACC;AAAA,oDAAC,sBACE;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY,GAAG,WAAW;AAAA,YAC1B,MAAK;AAAA;AAAA,QACP;AAAA,QAEF,6CAAC,6BAAK,aAAL,EAAiB,IAAG,MAAM,gBAAK;AAAA,SAClC;AAAA,MAEC,WACC,6CAAC,gCAAK,UAAU,KAAK,OAAM,gBACxB,mBACH;AAAA,MAGD,iBACC,8CAAC,WACE;AAAA,qBACC,8CAAC,gCAAK,MAAM,YAAY,UAAQ,MAC9B;AAAA,uDAAC,gCAAK,UAAU,KAAM,yBAAc;AAAA,UACpC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAW;AAAA,cACX,IAAI;AAAA,cACJ,MAAK;AAAA;AAAA,UACP;AAAA,WACF,IAEA,6CAAC,6BAAK,aAAL,EAAkB,yBAAc;AAAA,QAElC,oBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SAEJ;AAAA,MAGD,eAAe,6CAAC,gCAAK,UAAU,KAAM,uBAAY;AAAA,MAEjD,YACC,8CAAC,WACC;AAAA,qDAAC,iCAAK,MAAK,wBAAuB,eAAW,MAAC,MAAK,SAAQ;AAAA,QAC3D,6CAAC,gCAAK,UAAU,KAAM,oBAAS;AAAA,SACjC;AAAA,MAGD,YAAY,SAAS,SAAS,KAC7B,6CAAC,WACE,mBAAS,IAAI,CAAC,MAAM,UACnB,6CAAC,gCAAK,UAAU,KACb,kBADuB,KAE1B,CACD,GACH;AAAA,OAEJ;AAAA,IAEC,UAAU,6CAAC,sCAAY,kBAAO;AAAA,KACjC;AAEJ;;;AErLA,IAAAC,4BAAmB;AACnB,IAAAC,mCAA4B;AAC5B,IAAAC,6BAAuB;AAsHb,IAAAC,sBAAA;AAlHV,IAAM,yBAAyB,0BAAAC,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,sBAAsB,0BAAAA,QAAO;AAAA;AAAA;AAAA;AAKnC,IAAM,uBAAuB,0BAAAA,QAAO;AAAA;AAAA;AAAA,SAG3B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAK1C,IAAM,uBAAuB,0BAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMpC,IAAM,oBAAoB,0BAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,SAIxB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAK1C,IAAM,oBAAoB,0BAAAA,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,sBAAsB,0BAAAA,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,8CAAC,0BAAuB,WAAsB,OAAO,MAClD;AAAA,iBACC,6CAAC,uBACC,uDAAC,qCAAO,KAAK,WAAW,MAAM,aAAa,MAAM,YAAY,GAC/D;AAAA,IAGF,8CAAC,wBACE;AAAA,qBACC,6CAAC,wBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAY,oBAAoB,GAAG,WAAW;AAAA,UAC9C,MAAK;AAAA;AAAA,MACP,GACF;AAAA,MAGF,8CAAC,qBACE;AAAA,gBAAQ,6CAAC,qBAAmB,gBAAK;AAAA,QAEjC,iBACC,6CAAC,uBAAqB,yBAAc;AAAA,SAExC;AAAA,MAEC,oBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,OAEJ;AAAA,KACF;AAEJ;;;ACxJA,IAAAC,4BAAmB;AACnB,+BAAsB;AAkClB,IAAAC,sBAAA;AA9BJ,IAAM,yBAAqB,0BAAAC,SAAO,8BAAK;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;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACC,GAAG;AAAA,IAEJ,uDAAC,iBAAc,MAAK,SAAS,GAAG,OAAO;AAAA;AACzC;","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.
|
|
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.
|
|
24
|
-
"@sproutsocial/seeds-react-card": "^1.1.
|
|
25
|
-
"@sproutsocial/seeds-react-icon": "^2.4.
|
|
26
|
-
"@sproutsocial/seeds-react-link": "^1.1.
|
|
27
|
-
"@sproutsocial/seeds-react-partner-logo": "^1.7.
|
|
28
|
-
"@sproutsocial/seeds-react-text": "^1.
|
|
29
|
-
"@sproutsocial/seeds-react-token": "^1.5.
|
|
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",
|
package/src/ProfileCard.tsx
CHANGED
|
@@ -145,9 +145,7 @@ export const ProfileCard = ({
|
|
|
145
145
|
/>
|
|
146
146
|
</Link>
|
|
147
147
|
) : (
|
|
148
|
-
<Text.SmallByline
|
|
149
|
-
{secondaryName}
|
|
150
|
-
</Text.SmallByline>
|
|
148
|
+
<Text.SmallByline>{secondaryName}</Text.SmallByline>
|
|
151
149
|
)}
|
|
152
150
|
{verificationType && (
|
|
153
151
|
<VerifiedProfileIcon
|