@atlaskit/smart-card 33.3.0 → 34.0.0

package/dist/types/view/InlineCard/Frame/styled.d.ts

@@ -1,5 +1,9 @@
-/// <reference types="react" />
-export interface WrapperProps {
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export interface WrapperProps extends React.ComponentProps<any> {
     href?: string;
     isSelected?: boolean;
     isInteractive?: boolean;
@@ -7,11 +11,5 @@ export interface WrapperProps {
     isHovered?: boolean;
     truncateInline?: boolean;
 }
-export declare const WrapperAnchor: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & WrapperProps, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
-export declare const WrapperSpan: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const WrapperSpan: React.ForwardRefExoticComponent<Pick<WrapperProps, keyof WrapperProps> & React.RefAttributes<HTMLSpanElement>>;
+export declare const WrapperAnchor: React.ForwardRefExoticComponent<Pick<WrapperProps, keyof WrapperProps> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types/view/InlineCard/Icon-emotion.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const Icon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const AKIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Shimmer: ({ testId }: {
+    testId: string;
+}) => JSX.Element;

package/dist/types/view/InlineCard/Icon.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
-export declare const Icon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const AKIconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Icon: React.ComponentType<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & import("@compiled/react").StyledProps>;
+export declare const AKIconWrapper: React.ComponentType<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
 export declare const Shimmer: ({ testId }: {
     testId: string;
 }) => JSX.Element;

package/dist/types/view/InlineCard/IconAndTitleLayout/styled-emotion.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+export declare const IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const EmojiWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconTitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const LozengeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const RightIconPositionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconPositionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconEmptyWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TitleWrapperClassName = "smart-link-title-wrapper";
+export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/types/view/InlineCard/IconAndTitleLayout/styled.d.ts

@@ -1,36 +1,10 @@
 /// <reference types="react" />
-export declare const IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
-export declare const IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
-export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const EmojiWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const IconTitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const LozengeWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const RightIconPositionWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const IconPositionWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const IconEmptyWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const EmojiWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const IconTitleWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const LozengeWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const RightIconPositionWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const IconPositionWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const IconEmptyWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
 export declare const TitleWrapperClassName = "smart-link-title-wrapper";
-export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TitleWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;

package/dist/types/view/InlineCard/ResolvingView/styled-emotion.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/types/view/InlineCard/ResolvingView/styled.d.ts

@@ -1,9 +1,2 @@
 /// <reference types="react" />
-export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+export declare const SpinnerWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;

package/dist/types/view/InlineCard/styled-emotion.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const IconStyledButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const NoLinkAppearance: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const LinkAppearance: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;

package/dist/types/view/InlineCard/styled.d.ts

@@ -1,13 +1,2 @@
 /// <reference types="react" />
-export declare const IconStyledButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const NoLinkAppearance: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const LinkAppearance: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const IconStyledButton: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;

package/dist/types-ts4.5/view/HoverCard/components/HoverCardComponent.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type HoverCardComponentProps } from '../types';
 export declare const HOVER_CARD_SOURCE = "smartLinkPreviewHoverCard";
-export declare const HoverCardComponent: ({ children, url, id, canOpen, closeOnChildClick, actionOptions, allowEventPropagation, zIndex, noFadeDelay, hoverPreviewOptions, }: HoverCardComponentProps) => jsx.JSX.Element;
+export declare const HoverCardComponent: ({ children, url, id, canOpen, closeOnChildClick, actionOptions, allowEventPropagation, zIndex, noFadeDelay, hoverPreviewOptions, role, label, titleId, }: HoverCardComponentProps) => jsx.JSX.Element;

package/dist/types-ts4.5/view/HoverCard/types.d.ts

@@ -42,6 +42,21 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
      * Additional configurations for hover card.
      */
     hoverPreviewOptions?: HoverPreviewOptions;
+    /**
+     * Use this to set the accessibility role for the hover card.
+     * Should be used along with `label` or `titleId` for supported roles.
+     */
+    role?: string;
+    /**
+     * Refers to an `aria-label` attribute. Sets an accessible name for the hover card to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the hover card `aria-labelledby` attribute.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
 }
 /**
  * An internal props that internal smart-card components can use to configure

package/dist/types-ts4.5/view/InlineCard/Frame/styled-emotion.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface WrapperProps {
+    href?: string;
+    isSelected?: boolean;
+    isInteractive?: boolean;
+    withoutBackground?: boolean;
+    isHovered?: boolean;
+    truncateInline?: boolean;
+}
+export declare const WrapperAnchor: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & WrapperProps, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const WrapperSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/types-ts4.5/view/InlineCard/Frame/styled.d.ts

@@ -1,5 +1,9 @@
-/// <reference types="react" />
-export interface WrapperProps {
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export interface WrapperProps extends React.ComponentProps<any> {
     href?: string;
     isSelected?: boolean;
     isInteractive?: boolean;
@@ -7,11 +11,5 @@ export interface WrapperProps {
     isHovered?: boolean;
     truncateInline?: boolean;
 }
-export declare const WrapperAnchor: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & WrapperProps, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
-export declare const WrapperSpan: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const WrapperSpan: React.ForwardRefExoticComponent<Pick<WrapperProps, keyof WrapperProps> & React.RefAttributes<HTMLSpanElement>>;
+export declare const WrapperAnchor: React.ForwardRefExoticComponent<Pick<WrapperProps, keyof WrapperProps> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types-ts4.5/view/InlineCard/Icon-emotion.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const Icon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const AKIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Shimmer: ({ testId }: {
+    testId: string;
+}) => JSX.Element;

package/dist/types-ts4.5/view/InlineCard/Icon.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
-export declare const Icon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const AKIconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Icon: React.ComponentType<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & import("@compiled/react").StyledProps>;
+export declare const AKIconWrapper: React.ComponentType<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
 export declare const Shimmer: ({ testId }: {
     testId: string;
 }) => JSX.Element;

package/dist/types-ts4.5/view/InlineCard/IconAndTitleLayout/styled-emotion.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+export declare const IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const EmojiWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconTitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const LozengeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const RightIconPositionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconPositionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconEmptyWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TitleWrapperClassName = "smart-link-title-wrapper";
+export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/types-ts4.5/view/InlineCard/IconAndTitleLayout/styled.d.ts

@@ -1,36 +1,10 @@
 /// <reference types="react" />
-export declare const IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
-export declare const IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
-export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const EmojiWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const IconTitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const LozengeWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const RightIconPositionWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const IconPositionWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const IconEmptyWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const EmojiWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const IconTitleWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const LozengeWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const RightIconPositionWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const IconPositionWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
+export declare const IconEmptyWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;
 export declare const TitleWrapperClassName = "smart-link-title-wrapper";
-export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TitleWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;

package/dist/types-ts4.5/view/InlineCard/ResolvingView/styled-emotion.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/types-ts4.5/view/InlineCard/ResolvingView/styled.d.ts

@@ -1,9 +1,2 @@
 /// <reference types="react" />
-export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+export declare const SpinnerWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;

package/dist/types-ts4.5/view/InlineCard/styled-emotion.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const IconStyledButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const NoLinkAppearance: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const LinkAppearance: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;

package/dist/types-ts4.5/view/InlineCard/styled.d.ts

@@ -1,13 +1,2 @@
 /// <reference types="react" />
-export declare const IconStyledButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const NoLinkAppearance: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const LinkAppearance: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const IconStyledButton: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react").StyledProps>;

package/hooks/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/hooks.js",
   "module": "../dist/esm/hooks.js",
   "module:es2019": "../dist/es2019/hooks.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/hooks.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/hover-card/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/hoverCard.js",
   "module": "../dist/esm/hoverCard.js",
   "module:es2019": "../dist/es2019/hoverCard.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/hoverCard.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/link-url/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/linkUrl.js",
   "module": "../dist/esm/linkUrl.js",
   "module:es2019": "../dist/es2019/linkUrl.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/linkUrl.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "33.3.0",
+	"version": "34.0.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,7 +12,9 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.ts",
 	"atlassian": {
 		"team": "Linking Platform",
@@ -32,9 +34,10 @@
 		"@atlaskit/badge": "^16.4.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/checkbox": "^15.2.0",
+		"@atlaskit/css": "^0.7.0",
 		"@atlaskit/dropdown-menu": "^12.23.0",
 		"@atlaskit/form": "^11.0.0",
-		"@atlaskit/frontend-utilities": "^2.7.0",
+		"@atlaskit/frontend-utilities": "^2.8.0",
 		"@atlaskit/heading": "^4.0.0",
 		"@atlaskit/icon": "^23.1.0",
 		"@atlaskit/icon-file-type": "^6.8.0",
@@ -50,7 +53,7 @@
 		"@atlaskit/logo": "^15.1.0",
 		"@atlaskit/lozenge": "^11.12.0",
 		"@atlaskit/menu": "^2.13.0",
-		"@atlaskit/modal-dialog": "^12.18.0",
+		"@atlaskit/modal-dialog": "^12.19.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popup": "^1.30.0",
@@ -65,6 +68,7 @@
 		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.1",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.0.0",
 		"@formatjs/intl-utils": "^3.8.4",
@@ -131,6 +135,9 @@
 			"design-tokens": [
 				"color",
 				"spacing"
+			],
+			"styling": [
+				"compiled"
 			]
 		},
 		"@atlassian/frontend": {
@@ -176,6 +183,9 @@
 		},
 		"send_locale_to_summarize_in_assistance-service": {
 			"type": "boolean"
+		},
+		"bandicoots-compiled-migration-smartcard": {
+			"type": "boolean"
 		}
 	}
 }

package/ssr/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/ssr.js",
   "module": "../dist/esm/ssr.js",
   "module:es2019": "../dist/es2019/ssr.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/ssr.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/types/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/types.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {