@atlaskit/profilecard 22.1.0 → 22.2.0

package/dist/esm/styled/TeamCard.js

@@ -1,18 +1,58 @@
+/* TeamCard.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
 var _templateObject;
+import "./TeamCard.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { bgColor, teamHeaderBgColor } from './constants';
-
+var styles = {
+  cardtriggerwrapper: "_1e0c1kw7",
+  cardwrapper: "_2rkoglpi _1bsbnklw _kqswh2mm",
+  teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
+  cardheader: "_1itk1g60 _12vemgnk _ouxl1ssb _1lrw1dfr _4t3i1qr7",
+  cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
+  teamname: "_11c8o0gd _1reo15vq _18m915vq _1p1dglyw _c71lckbl _1e0ccj1k",
+  membercount: "_syaz1wmz _19pk1b66",
+  avatarsection: "_19pkpxbi _18u01i6y",
+  descriptionwrapper: "_19pkpxbi _4cvr1h6o _1e0c1txw",
+  description: "_1reo15vq _18m915vq _c71l1wqb _1e0ccj1k",
+  actionbuttons: "_1bsb1osq _1e0c1txw _1bah1yb4 _19pk1ejb _2hwx10v4 _otyridpf _18u0x0bf",
+  wrappedbutton: "_i0dlidpf _16jlkb7n _18u0u2gc",
+  morebutton: "_18u0u2gc",
+  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw",
+  accesslocksvgwrapper: "_otyr1ejb"
+};
+export var CardTriggerWrapper = function CardTriggerWrapper() {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.cardtriggerwrapper)
+  }) : /*#__PURE__*/React.createElement(CardTriggerWrapperLegacy, null);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var CardTriggerWrapper = styled.div({
+var CardTriggerWrapperLegacy = styled.div({
   display: 'inherit'
 });
-
+export var CardWrapper = function CardWrapper(_ref) {
+  var testId = _ref.testId,
+    children = _ref.children;
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.cardwrapper),
+    backgroundColor: "elevation.surface.overlay",
+    testId: testId
+  }, children) : /*#__PURE__*/React.createElement(CardWrapperLegacy, {
+    "data-testid": testId
+  }, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var CardWrapper = styled.div({
+var CardWrapperLegacy = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: bgColor,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -23,32 +63,64 @@ export var CardWrapper = styled.div({
   WebkitFontSmoothing: 'antialiased',
   MozOsxFontSmoothing: 'grayscale'
 });
-
+export var TeamForbiddenErrorStateWrapper = function TeamForbiddenErrorStateWrapper(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.teamforbiddenerrorstatewrapper)
+  }, props)) : /*#__PURE__*/React.createElement(TeamForbiddenErrorStateWrapperLegacy, {
+    "data-testid": props.testId
+  }, props.children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var TeamForbiddenErrorStateWrapper = styled.div({
+var TeamForbiddenErrorStateWrapperLegacy = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: '320px',
   position: 'relative'
 });
+export var CardHeader = function CardHeader(_ref2) {
+  var image = _ref2.image,
+    isLoading = _ref2.isLoading,
+    label = _ref2.label;
+  return fg('compiled-migration-profilecard') ? isLoading || !image ? /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.cardheader),
+    backgroundColor: "color.background.neutral"
+  }) : /*#__PURE__*/React.createElement(Box, {
+    as: "img",
+    alt: label || '',
+    src: image,
+    xcss: cx(styles.cardheader),
+    backgroundColor: "color.background.neutral"
+  }) : /*#__PURE__*/React.createElement(CardHeaderLegacy, {
+    image: image,
+    isLoading: isLoading
+  });
+};
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var CardHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", ";\n\tbackground-image: ", ";\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tbox-sizing: content-box;\n\theight: 128px;\n"])), function (props) {
+var CardHeaderLegacy = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", ";\n\tbackground-image: ", ";\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tbox-sizing: content-box;\n\theight: 128px;\n"])), function (props) {
   return props.isLoading ? "var(--ds-background-neutral, ".concat(N20, ")") : props.image ? '' : teamHeaderBgColor;
 }, function (props) {
   return props.image ? "url(".concat(props.image, ")") : '';
 });
-
+export var CardContent = function CardContent(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.cardcontent)
+  }, props)) : /*#__PURE__*/React.createElement(CardContentLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var CardContent = styled.div({
+var CardContentLegacy = styled.div({
   display: 'flex',
   flexDirection: 'column',
   padding: "var(--ds-space-300, 24px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   minHeight: '104px'
 });
-
+export var TeamName = function TeamName(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.teamname)
+  }, props)) : /*#__PURE__*/React.createElement(TeamNameLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export var TeamName = styled.h6({
+var TeamNameLegacy = styled.h6({
   font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   textTransform: 'none',
   overflow: 'hidden',
@@ -57,78 +129,104 @@ export var TeamName = styled.h6({
   WebkitLineClamp: 2,
   WebkitBoxOrient: 'vertical'
 });
-
+export var MemberCount = function MemberCount(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.membercount)
+  }, props)) : /*#__PURE__*/React.createElement(MemberCountLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var MemberCount = styled.div({
+var MemberCountLegacy = styled.div({
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
   marginTop: "var(--ds-space-050, 4px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var AvatarSection = styled.div({
+export var AvatarSection = function AvatarSection(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.avatarsection)
+  }, props)) : /*#__PURE__*/React.createElement(AvatarSectionLegacy, props);
+};
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+var AvatarSectionLegacy = styled.div({
   marginTop: "var(--ds-space-200, 16px)",
   marginLeft: "var(--ds-space-negative-025, -2px)"
 });
-
+export var DescriptionWrapper = function DescriptionWrapper(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.descriptionwrapper)
+  }, props)) : /*#__PURE__*/React.createElement(DescriptionWrapperLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var DescriptionWrapper = styled.div({
+var DescriptionWrapperLegacy = styled.div({
   marginTop: "var(--ds-space-200, 16px)",
   alignItems: 'center',
   display: 'flex'
 });
-
+export var Description = function Description(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.description)
+  }, /*#__PURE__*/React.createElement(Text, _extends({
+    maxLines: 3
+  }, props))) : /*#__PURE__*/React.createElement(DescriptionLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var Description = styled.span({
+var DescriptionLegacy = styled.span({
   overflow: 'hidden',
   maxHeight: '60px',
   display: '-webkit-box',
   WebkitLineClamp: 3,
   WebkitBoxOrient: 'vertical'
 });
-
+export var ActionButtons = function ActionButtons(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.actionbuttons),
+    backgroundColor: "elevation.surface.overlay"
+  }, props)) : /*#__PURE__*/React.createElement(ActionButtonsLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ActionButtons = styled.div({
+var ActionButtonsLegacy = styled.div({
   width: 'calc(100% + 8px)',
   display: 'flex',
   justifyContent: 'space-between',
   margin: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-negative-300, -24px)", " 0 ", "var(--ds-space-negative-100, -8px)"),
   backgroundColor: "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))"
 });
-
+export var WrappedButton = function WrappedButton(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.wrappedbutton)
+  }, props)) : /*#__PURE__*/React.createElement(WrappedButtonLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var WrappedButton = styled.div({
+var WrappedButtonLegacy = styled.div({
   flexBasis: 0,
   flexGrow: 1,
   marginLeft: "var(--ds-space-100, 8px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var MoreButton = styled.div({
+export var MoreButton = function MoreButton(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.morebutton)
+  }, props)) : /*#__PURE__*/React.createElement(MoreButtonLegacy, props);
+};
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+var MoreButtonLegacy = styled.div({
   marginLeft: "var(--ds-space-100, 8px)"
 });
-
+export var LoadingWrapper = function LoadingWrapper(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.loadingwrapper)
+  }, props)) : /*#__PURE__*/React.createElement(LoadingWrapperLegacy, {
+    "data-testid": props.testId
+  }, props.children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var LoadingWrapper = styled.div({
+var LoadingWrapperLegacy = styled.div({
   textAlign: 'center',
   marginTop: "var(--ds-space-500, 40px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var AccessLockSVGWrapper = styled.div({
+export var AccessLockSVGWrapper = function AccessLockSVGWrapper(props) {
+  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: cx(styles.accesslocksvgwrapper)
+  }, props)) : /*#__PURE__*/React.createElement(AccessLockSVGWrapperLegacy, props);
+};
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+var AccessLockSVGWrapperLegacy = styled.div({
   marginBottom: "var(--ds-space-300, 24px)"
-});
-
-// export const LoadingTeamName = styled.div`
-//   width: 175px;
-//   height: ${gridSize () *3)px;
-//   border-radius: ${borderRadius}px;
-//   background-color: #f4f5f7;
-// `;
-
-// export const LoadingMemberCount = styled.div`
-//   width: 81px;
-//   height: ${gridSize () *2)px;
-//   border-radius: 3px;
-//   background-color: #f4f5f7;
-//   margin: 4px 0;
-// `;
+});

package/dist/esm/util/analytics.js

@@ -39,7 +39,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "22.1.0"
+      packageVersion: "22.2.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/styled/Error.d.ts

@@ -1,13 +1,11 @@
-/// <reference types="react" />
-export declare const ErrorWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ErrorTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-export declare const TeamErrorText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+import React from 'react';
+export declare const ErrorWrapper: (props: {
+    children: React.ReactNode;
+    testId?: string;
+}) => React.JSX.Element;
+export declare const ErrorTitle: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const TeamErrorText: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types/styled/TeamCard.d.ts

@@ -1,64 +1,49 @@
-/// <reference types="react" />
-export declare const CardTriggerWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TeamForbiddenErrorStateWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CardHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
+import React from 'react';
+export declare const CardTriggerWrapper: () => React.JSX.Element;
+export declare const CardWrapper: ({ testId, children, }: {
+    testId?: string | undefined;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const TeamForbiddenErrorStateWrapper: (props: {
+    children: React.ReactNode;
+    testId?: string;
+}) => React.JSX.Element;
+export declare const CardHeader: ({ image, isLoading, label, }: {
     image?: string | undefined;
     isLoading?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CardContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TeamName: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
-export declare const MemberCount: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AvatarSection: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DescriptionWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Description: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ActionButtons: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const WrappedButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MoreButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LoadingWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AccessLockSVGWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    label?: string | undefined;
+}) => React.JSX.Element;
+export declare const CardContent: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const TeamName: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const MemberCount: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const AvatarSection: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const DescriptionWrapper: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const Description: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ActionButtons: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const WrappedButton: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const MoreButton: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const LoadingWrapper: (props: {
+    testId?: string;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const AccessLockSVGWrapper: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types-ts4.5/styled/Error.d.ts

@@ -1,13 +1,11 @@
-/// <reference types="react" />
-export declare const ErrorWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ErrorTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-export declare const TeamErrorText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+import React from 'react';
+export declare const ErrorWrapper: (props: {
+    children: React.ReactNode;
+    testId?: string;
+}) => React.JSX.Element;
+export declare const ErrorTitle: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const TeamErrorText: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types-ts4.5/styled/TeamCard.d.ts

@@ -1,64 +1,49 @@
-/// <reference types="react" />
-export declare const CardTriggerWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TeamForbiddenErrorStateWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CardHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
+import React from 'react';
+export declare const CardTriggerWrapper: () => React.JSX.Element;
+export declare const CardWrapper: ({ testId, children, }: {
+    testId?: string | undefined;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const TeamForbiddenErrorStateWrapper: (props: {
+    children: React.ReactNode;
+    testId?: string;
+}) => React.JSX.Element;
+export declare const CardHeader: ({ image, isLoading, label, }: {
     image?: string | undefined;
     isLoading?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CardContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TeamName: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
-export declare const MemberCount: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AvatarSection: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DescriptionWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Description: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ActionButtons: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const WrappedButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MoreButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LoadingWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AccessLockSVGWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    label?: string | undefined;
+}) => React.JSX.Element;
+export declare const CardContent: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const TeamName: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const MemberCount: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const AvatarSection: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const DescriptionWrapper: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const Description: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ActionButtons: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const WrappedButton: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const MoreButton: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const LoadingWrapper: (props: {
+    testId?: string;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const AccessLockSVGWrapper: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "22.1.0",
+	"version": "22.2.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -60,7 +60,7 @@
 		"@atlaskit/empty-state": "^8.2.0",
 		"@atlaskit/focus-ring": "^2.1.0",
 		"@atlaskit/give-kudos": "^3.1.0",
-		"@atlaskit/icon": "^23.8.0",
+		"@atlaskit/icon": "^23.9.0",
 		"@atlaskit/lozenge": "^11.13.0",
 		"@atlaskit/menu": "^2.14.0",
 		"@atlaskit/modal-dialog": "^12.20.0",