@sproutsocial/seeds-react-profile 0.3.10 → 0.3.13
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 +25 -0
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/InlineProfile.tsx +0 -1
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.36 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m18.67 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 95ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m9.76 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m18.52 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 97ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 8814ms
|
|
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 11.26s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-profile
|
|
2
2
|
|
|
3
|
+
## 0.3.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f50b651: Remove lowercase css from inline profile component name, so that names are displayed with the correct casing.
|
|
8
|
+
|
|
9
|
+
## 0.3.12
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- @sproutsocial/seeds-react-avatar@1.1.5
|
|
14
|
+
- @sproutsocial/seeds-react-card@1.1.24
|
|
15
|
+
- @sproutsocial/seeds-react-icon@2.2.4
|
|
16
|
+
- @sproutsocial/seeds-react-link@1.1.2
|
|
17
|
+
- @sproutsocial/seeds-react-partner-logo@1.7.2
|
|
18
|
+
- @sproutsocial/seeds-react-token@1.4.18
|
|
19
|
+
|
|
20
|
+
## 0.3.11
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- @sproutsocial/seeds-react-icon@2.2.3
|
|
25
|
+
- @sproutsocial/seeds-react-card@1.1.23
|
|
26
|
+
- @sproutsocial/seeds-react-token@1.4.17
|
|
27
|
+
|
|
3
28
|
## 0.3.10
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -225,7 +225,6 @@ var InlineProfileName = styled2.span`
|
|
|
225
225
|
${(props) => props.theme.typography[200]}
|
|
226
226
|
font-family: ${(props) => props.theme.fontFamily};
|
|
227
227
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
228
|
-
text-transform: lowercase;
|
|
229
228
|
color: ${(props) => props.theme.colors.text.body};
|
|
230
229
|
max-width: 100%;
|
|
231
230
|
overflow: hidden;
|
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 text-transform: lowercase;\n color: ${(props) => props.theme.colors.text.body};\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst InlineProfileHandle = styled.span`\n display: inline-block;\n ${(props) => props.theme.typography[200]}\n font-family: ${(props) => props.theme.fontFamily};\n color: ${(props) => props.theme.colors.text.subtext};\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst avatarSizeMap = {\n small: \"16px\",\n medium: \"20px\",\n large: \"24px\",\n} as const;\n\n/**\n * A compact inline profile component that displays avatar, name/handle, and verification.\n * Perfect for use in post headers, comments, or other compact spaces.\n *\n * @param props - Profile props\n * @param props.name - Name of the profile\n * @param props.secondaryName - Secondary name of the profile\n * @param props.partnerName - Partner logo name\n * @param props.partnerLogoLabel - Aria-label for the partner logo\n * @param props.avatarSize - Size of the avatar\n * @param props.avatarUrl - Image URL for the avatar\n * @param props.children - Additional elements to render within the profile component\n * @returns JSX.Element representing a user profile\n *\n * @example\n * <InlineProfile\n * name=\"John Doe\"\n * secondaryName=\"johndoe123\"\n * partnerName=\"facebook\"\n * partnerLogoLabel=\"Facebook Logo\"\n * avatarSize=\"24px\"\n * avatarUrl=\"https://example.com/avatar.jpg\"\n * >\n * <Badge text=\"Moderator\" badgeColor=\"green\" />\n * </InlineProfile>\n */\nexport const InlineProfile = ({\n name,\n secondaryName,\n partnerName,\n partnerLogoLabel,\n size = \"medium\",\n avatarSize: avatarSizeOverride,\n avatarUrl,\n verificationType,\n className,\n}: TypeInlineProfileProps) => {\n const displayName = name || secondaryName || \"Unknown Profile\";\n const avatarSize = avatarSizeOverride || avatarSizeMap[size];\n\n return (\n <InlineProfileContainer className={className} $size={size}>\n {avatarUrl && (\n <InlineProfileAvatar>\n <Avatar src={avatarUrl} name={displayName} size={avatarSize} />\n </InlineProfileAvatar>\n )}\n\n <InlineProfileContent>\n {partnerName && (\n <InlineProfileNetwork>\n <PartnerLogo\n partnerName={partnerName}\n aria-label={partnerLogoLabel || `${partnerName} profile`}\n size=\"small\"\n />\n </InlineProfileNetwork>\n )}\n\n <InlineProfileText>\n {name && <InlineProfileName>{name}</InlineProfileName>}\n\n {secondaryName && (\n <InlineProfileHandle>{secondaryName}</InlineProfileHandle>\n )}\n </InlineProfileText>\n\n {verificationType && (\n <VerifiedProfileIcon\n partnerName={partnerName}\n verificationType={verificationType}\n />\n )}\n </InlineProfileContent>\n </InlineProfileContainer>\n );\n};\n","import styled from \"styled-components\";\nimport { Token } from \"@sproutsocial/seeds-react-token\";\nimport { InlineProfile } from \"./InlineProfile\";\nimport type { ProfileTokenProps } from \"./types\";\n\nconst StyledProfileToken = styled(Token)`\n box-sizing: border-box;\n display: inline-flex;\n max-width: 100%;\n vertical-align: middle;\n padding: ${(props) => props.theme.space[100]}\n ${(props) => props.theme.space[200]};\n margin: ${(props) => props.theme.space[100]} 0;\n`;\n\n/**\n * A ProfileToken component that wraps InlineProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n *\n * ProfileToken enforces design standards by only showing the profile name and network logo.\n * It does not support avatars, secondary names (handles), or custom avatar sizes.\n * Use InlineProfile directly if you need more flexibility.\n */\nexport const ProfileToken = ({\n className,\n onClick,\n tokenProps,\n ...props\n}: ProfileTokenProps) => (\n <StyledProfileToken\n className={className}\n closeable={false}\n onClick={onClick}\n {...tokenProps}\n >\n <InlineProfile size=\"small\" {...props} />\n </StyledProfileToken>\n);\n\nexport default ProfileToken;\n"],"mappings":";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,EAAiB,OAAM,gBACrB,yBACH;AAAA,QAED,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;;;AEvLA,OAAOE,aAAY;AACnB,SAAS,eAAAC,oBAAmB;AAC5B,SAAS,UAAAC,eAAc;AAuHb,gBAAAC,MAeF,QAAAC,aAfE;AAnHV,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;AAAA,WAEjD,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;;;ACzJA,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"]}
|
|
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"]}
|
package/dist/index.js
CHANGED
|
@@ -258,7 +258,6 @@ var InlineProfileName = import_styled_components2.default.span`
|
|
|
258
258
|
${(props) => props.theme.typography[200]}
|
|
259
259
|
font-family: ${(props) => props.theme.fontFamily};
|
|
260
260
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
261
|
-
text-transform: lowercase;
|
|
262
261
|
color: ${(props) => props.theme.colors.text.body};
|
|
263
262
|
max-width: 100%;
|
|
264
263
|
overflow: hidden;
|
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 text-transform: lowercase;\n color: ${(props) => props.theme.colors.text.body};\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst InlineProfileHandle = styled.span`\n display: inline-block;\n ${(props) => props.theme.typography[200]}\n font-family: ${(props) => props.theme.fontFamily};\n color: ${(props) => props.theme.colors.text.subtext};\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst avatarSizeMap = {\n small: \"16px\",\n medium: \"20px\",\n large: \"24px\",\n} as const;\n\n/**\n * A compact inline profile component that displays avatar, name/handle, and verification.\n * Perfect for use in post headers, comments, or other compact spaces.\n *\n * @param props - Profile props\n * @param props.name - Name of the profile\n * @param props.secondaryName - Secondary name of the profile\n * @param props.partnerName - Partner logo name\n * @param props.partnerLogoLabel - Aria-label for the partner logo\n * @param props.avatarSize - Size of the avatar\n * @param props.avatarUrl - Image URL for the avatar\n * @param props.children - Additional elements to render within the profile component\n * @returns JSX.Element representing a user profile\n *\n * @example\n * <InlineProfile\n * name=\"John Doe\"\n * secondaryName=\"johndoe123\"\n * partnerName=\"facebook\"\n * partnerLogoLabel=\"Facebook Logo\"\n * avatarSize=\"24px\"\n * avatarUrl=\"https://example.com/avatar.jpg\"\n * >\n * <Badge text=\"Moderator\" badgeColor=\"green\" />\n * </InlineProfile>\n */\nexport const InlineProfile = ({\n name,\n secondaryName,\n partnerName,\n partnerLogoLabel,\n size = \"medium\",\n avatarSize: avatarSizeOverride,\n avatarUrl,\n verificationType,\n className,\n}: TypeInlineProfileProps) => {\n const displayName = name || secondaryName || \"Unknown Profile\";\n const avatarSize = avatarSizeOverride || avatarSizeMap[size];\n\n return (\n <InlineProfileContainer className={className} $size={size}>\n {avatarUrl && (\n <InlineProfileAvatar>\n <Avatar src={avatarUrl} name={displayName} size={avatarSize} />\n </InlineProfileAvatar>\n )}\n\n <InlineProfileContent>\n {partnerName && (\n <InlineProfileNetwork>\n <PartnerLogo\n partnerName={partnerName}\n aria-label={partnerLogoLabel || `${partnerName} profile`}\n size=\"small\"\n />\n </InlineProfileNetwork>\n )}\n\n <InlineProfileText>\n {name && <InlineProfileName>{name}</InlineProfileName>}\n\n {secondaryName && (\n <InlineProfileHandle>{secondaryName}</InlineProfileHandle>\n )}\n </InlineProfileText>\n\n {verificationType && (\n <VerifiedProfileIcon\n partnerName={partnerName}\n verificationType={verificationType}\n />\n )}\n </InlineProfileContent>\n </InlineProfileContainer>\n );\n};\n","import styled from \"styled-components\";\nimport { Token } from \"@sproutsocial/seeds-react-token\";\nimport { InlineProfile } from \"./InlineProfile\";\nimport type { ProfileTokenProps } from \"./types\";\n\nconst StyledProfileToken = styled(Token)`\n box-sizing: border-box;\n display: inline-flex;\n max-width: 100%;\n vertical-align: middle;\n padding: ${(props) => props.theme.space[100]}\n ${(props) => props.theme.space[200]};\n margin: ${(props) => props.theme.space[100]} 0;\n`;\n\n/**\n * A ProfileToken component that wraps InlineProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n *\n * ProfileToken enforces design standards by only showing the profile name and network logo.\n * It does not support avatars, secondary names (handles), or custom avatar sizes.\n * Use InlineProfile directly if you need more flexibility.\n */\nexport const ProfileToken = ({\n className,\n onClick,\n tokenProps,\n ...props\n}: ProfileTokenProps) => (\n <StyledProfileToken\n className={className}\n closeable={false}\n onClick={onClick}\n {...tokenProps}\n >\n <InlineProfile size=\"small\" {...props} />\n </StyledProfileToken>\n);\n\nexport default ProfileToken;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,EAAiB,OAAM,gBACrB,yBACH;AAAA,QAED,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;;;AEvLA,IAAAC,4BAAmB;AACnB,IAAAC,mCAA4B;AAC5B,IAAAC,6BAAuB;AAuHb,IAAAC,sBAAA;AAnHV,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;AAAA,WAEjD,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;;;ACzJA,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"]}
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,EAAiB,OAAM,gBACrB,yBACH;AAAA,QAED,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;;;AEvLA,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.13",
|
|
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.2.
|
|
26
|
-
"@sproutsocial/seeds-react-link": "^1.1.
|
|
27
|
-
"@sproutsocial/seeds-react-partner-logo": "^1.7.
|
|
23
|
+
"@sproutsocial/seeds-react-avatar": "^1.1.5",
|
|
24
|
+
"@sproutsocial/seeds-react-card": "^1.1.24",
|
|
25
|
+
"@sproutsocial/seeds-react-icon": "^2.2.4",
|
|
26
|
+
"@sproutsocial/seeds-react-link": "^1.1.2",
|
|
27
|
+
"@sproutsocial/seeds-react-partner-logo": "^1.7.2",
|
|
28
28
|
"@sproutsocial/seeds-react-text": "^1.4.0",
|
|
29
|
-
"@sproutsocial/seeds-react-token": "^1.4.
|
|
29
|
+
"@sproutsocial/seeds-react-token": "^1.4.18"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@types/react": "^18.0.0",
|
package/src/InlineProfile.tsx
CHANGED
|
@@ -50,7 +50,6 @@ const InlineProfileName = styled.span`
|
|
|
50
50
|
${(props) => props.theme.typography[200]}
|
|
51
51
|
font-family: ${(props) => props.theme.fontFamily};
|
|
52
52
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
53
|
-
text-transform: lowercase;
|
|
54
53
|
color: ${(props) => props.theme.colors.text.body};
|
|
55
54
|
max-width: 100%;
|
|
56
55
|
overflow: hidden;
|