@sproutsocial/racine 14.3.0 → 15.0.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Change Log
 
+## 15.0.1
+
+### Patch Changes
+
+- 5fc0ef75: Exports `Card` subcomponents from the root for easier importing
+
+## 15.0.0
+
+### Major Changes
+
+- 03601450: Introducing the new and improved Card component!
+
+  **Breaking changes**
+
+  - Replace `buttonProps` with relevant button props at surface level
+    - `tabindex`
+    - `disabled`
+    - `selected`
+
+  **Features**
+
+  - [x] Simplify markup
+  - [x] Fine tune styling
+  - [x] Add layout utility subcomponents to simplify common use cases
+  - [x] Improve component API and developer experience
+  - [x] Improve testing
+  - [x] TypeScript
+  - [x] Color contrast and keyboard accessible
+  - [x] Improve docs to better inform implementation
+
+### Minor Changes
+
+- 8e990d95: `Loader` component updated with accessible visual contrast
+
+  | Mode                                                                                                                                           | Old                                                                                                                                            | New                                                                                                                                            |
+  | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+  | Dark                                                                                                                                           |
+  | ![237793791-ab96c939-4fba-4183-b395-50524d2fc11c](https://github.com/sproutsocial/racine/assets/10147376/761485a3-fd7b-4d03-af48-a33f772009c5) | ![237793851-c9aa9395-99cb-4f82-95f7-906e13c1c042](https://github.com/sproutsocial/racine/assets/10147376/fe75d870-0f9b-4b32-9f54-c24fa1e9a9d7) |
+  | Light                                                                                                                                          | ![237793795-71880e84-8cd8-43cd-8c20-88b3dff3334f](https://github.com/sproutsocial/racine/assets/10147376/03565403-df9f-418c-a47f-bec2090c5806) | ![237793853-5de2d525-783a-4278-b0d3-6749f9a071c5](https://github.com/sproutsocial/racine/assets/10147376/3404af8c-6ce3-4203-aac4-7bc3aa9ae495) |
+
 ## 14.3.0
 
 ### Minor Changes

package/__flow__/Card/Card.flow.js

@@ -1,21 +1,5 @@
 // @flow
 import * as React from 'react';
-import type { TypeButtonProps } from "../Button/index.flow";
-import type { TypeBoxProps } from "../Box/index.flow";
-type TypeChildrenlessButtonProps = {
-  ...TypeButtonProps,
-  children?: void | null,
-  ...
-};
-export type TypeCardProps = {
-  ...TypeBoxProps,
-  onClick?: () => void,
-  href?: string,
-  children: React.Node,
-  /** Label describing the action that will be performed when the user interacts with the card */
-  ariaLabel: string,
-  buttonProps?: TypeChildrenlessButtonProps,
-  ...
-};
+import type { TypeCardProps } from "./CardTypes.flow";
 declare var Card: React.StatelessFunctionalComponent<TypeCardProps>;
 declare export default typeof Card;

package/__flow__/Card/CardTypes.flow.js

@@ -0,0 +1,66 @@
+// @flow
+
+import * as React from 'react';
+import type { TypeIconProps } from "../Icon/index.flow";
+import type { TypeStyledComponentsCommonProps, TypePropsWithChildren } from "../types/index.flow";
+import type { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps } from "../systemProps/index.flow";
+export type TypeSharedCardSystemProps = TypePropsWithChildren<{|
+  ...TypeStyledComponentsCommonProps,
+  ...TypeBorderSystemProps,
+  ...TypeColorSystemProps,
+  ...TypeFlexboxSystemProps,
+  ...TypeGridSystemProps,
+  ...TypeLayoutSystemProps,
+  ...TypePositionSystemProps,
+  ...TypeSpaceSystemProps,
+  key?: React.Key,
+|}>;
+export type TypeCardStyleProps = {|
+  elevation?: 'low' | 'medium' | 'high',
+  disabled?: boolean,
+  compositionalComponents?: boolean,
+  selected?: boolean,
+|};
+export type TypeCardStyleTransientProps = {|
+  $elevation?: 'low' | 'medium' | 'high',
+  $disabled?: boolean,
+  $compositionalComponents?: boolean,
+  $selected?: boolean,
+|};
+export type TypeStyledCard = {
+  ...TypeSharedCardSystemProps,
+  ...TypeCardStyleTransientProps,
+  ...
+};
+export type TypeCardStyles = {|
+  ...TypeSharedCardSystemProps,
+  ...$Diff<TypeCardStyleProps, {|
+    compositionalComponents: any
+  |}>,
+|};
+declare type TypeOnClick = (event: SyntheticMouseEvent<HTMLElement> | SyntheticMouseEvent<HTMLElement>) => void;
+export type TypeCardConditions = {|
+  role: 'link' | 'button' | 'checkbox' | 'presentation',
+  href?: string,
+  onClick?: TypeOnClick,
+  selected?: boolean,
+|};
+export type TypeCardProps = {
+  ...TypeCardConditions,
+  ...TypeCardStyles,
+  $elevation?: void,
+  $disabled?: void,
+  $compositionalComponents?: void,
+  $selected?: void,
+  ...
+};
+export type TypeCardArea = {
+  ...TypeSharedCardSystemProps,
+  $divider?: 'top' | 'bottom',
+  ...
+};
+export type TypeStyledSelectedIcon = {
+  ...TypeIconProps,
+  $selected: $PropertyType<TypeCardStyleTransientProps, '$selected'>,
+  ...
+};

package/__flow__/Card/index.flow.js

@@ -1,2 +1,3 @@
 // @flow
-export * from "./Card.flow";
+export * from "./Card.flow";
+export * from "./CardTypes.flow";

package/__flow__/EnumIconNames.flow.js

@@ -1,2 +1,2 @@
 // @flow
-export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "advocacy-outline" | "advocacy" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bookmark" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-ai-outline" | "comment-ai" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "github" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "h3" | "h4" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "reels-outline" | "reels" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "route" | "rss" | "sales" | "salesforce-cloud" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "send-again-outline" | "send-again" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "shopping-bag-outline" | "shopping-bag" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-check" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team-sprout-outline" | "team-sprout" | "team" | "text-asset" | "text" | "tiktok" | "times" | "tools" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "underline" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
+export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "advocacy-outline" | "advocacy" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bookmark" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-ai-outline" | "comment-ai" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "github" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "h3" | "h4" | "hamburger" | "hand-sparkle-outline" | "hand-sparkle" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "reels-outline" | "reels" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "route" | "rss" | "sales" | "salesforce-cloud" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "send-again-outline" | "send-again" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "shopping-bag-outline" | "shopping-bag" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-check" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team-sprout-outline" | "team-sprout" | "team" | "text-asset" | "text" | "tiktok" | "times" | "tools" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "underline" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";

package/__flow__/IconViewBoxes.js

@@ -174,6 +174,8 @@ module.exports = {
   "h3": "0 0 16 16",
   "h4": "0 0 16 16",
   "hamburger": "0 0 16 18",
+  "hand-sparkle-outline": "0 0 18 18",
+  "hand-sparkle": "0 0 18 18",
   "hashtag": "0 0 16 16",
   "headset": "0 0 16 16",
   "heart-outline": "0 0 16 16",

package/__flow__/index.flow.js

@@ -6,7 +6,7 @@ export type { EnumIllustrationNames } from "./EnumIllustrationNames.flow";
 export type { EnumLogoNames } from "./EnumLogoNames.flow";
 
 /* Theme and related types */
-export * from "./systemProps";
+export * from "./systemProps/index.flow";
 export { default as theme } from "./themes/light/theme.flow";
 export { default as darkTheme } from "./themes/dark/theme.flow";
 export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme/index.flow";

package/__flow__/systemProps/{background.js → background.flow.js}

@@ -2,7 +2,7 @@
 
 import { background } from 'styled-system';
 import type { Property$BackgroundImage, Property$BackgroundPosition, Property$Background, Property$BackgroundRepeat, Property$BackgroundSize } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#background
 

package/__flow__/systemProps/{border.js → border.flow.js}

@@ -2,7 +2,7 @@
 
 import { border } from 'styled-system';
 import type { Property$BorderBottomColor, Property$BorderBottomLeftRadius, Property$BorderBottom, Property$BorderBottomRightRadius, Property$BorderBottomStyle, Property$BorderBottomWidth, Property$BorderColor, Property$BorderLeftColor, Property$BorderLeft, Property$BorderLeftStyle, Property$BorderLeftWidth, Property$Border, Property$BorderRadius, Property$BorderRightColor, Property$BorderRight, Property$BorderRightStyle, Property$BorderRightWidth, Property$BorderStyle, Property$BorderTopColor, Property$BorderTopLeftRadius, Property$BorderTop, Property$BorderTopRightRadius, Property$BorderTopStyle, Property$BorderTopWidth, Property$BorderWidth } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#border
 

package/__flow__/systemProps/{color.js → color.flow.js}

@@ -2,11 +2,11 @@
 
 import { color } from 'styled-system';
 import type { Property$BackgroundColor, Property$Color, Property$Opacity } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<Property$BackgroundColor>;
+export type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<Property$BackgroundColor>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,

package/__flow__/systemProps/{custom.js → custom.flow.js}

@@ -2,7 +2,7 @@
 
 import { compose, system } from 'styled-system';
 import type { Property$Cursor, Property$WhiteSpace } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/custom-props
 

package/__flow__/systemProps/{flexbox.js → flexbox.flow.js}

@@ -2,7 +2,7 @@
 
 import { flexbox } from 'styled-system';
 import type { Property$AlignItems, Property$AlignContent, Property$JustifyContent, Property$JustifyItems, Property$FlexWrap, Property$FlexDirection, Property$Flex, Property$FlexBasis, Property$JustifySelf, Property$AlignSelf, Property$Gap, Property$ColumnGap, Property$RowGap, Globals } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#flexbox
 

package/__flow__/systemProps/{grid.js → grid.flow.js}

@@ -2,7 +2,7 @@
 
 import { grid } from 'styled-system';
 import type { Property$GridArea, Property$GridAutoColumns, Property$GridAutoFlow, Property$GridAutoRows, Property$GridColumn, Property$GridColumnGap, Property$GridGap, Property$GridRow, Property$GridRowGap, Property$GridTemplateAreas, Property$GridTemplateColumns, Property$GridTemplateRows } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#grid-layout
 

package/__flow__/systemProps/index.flow.js

@@ -0,0 +1,16 @@
+// @flow strict-local
+
+export * from "./types.flow";
+export * from "./background.flow";
+export * from "./border.flow";
+export * from "./color.flow";
+export * from "./custom.flow";
+export * from "./flexbox.flow";
+export * from "./grid.flow";
+export * from "./layout.flow";
+export * from "./position.flow";
+export * from "./shadow.flow";
+export * from "./space.flow";
+export * from "./systemProps.flow";
+export * from "./typography.flow";
+export * from "./variant.flow";

package/__flow__/systemProps/{layout.js → layout.flow.js}

@@ -2,7 +2,7 @@
 
 import { layout } from 'styled-system';
 import type { Property$Display, Property$Height, Property$MaxHeight, Property$MaxWidth, Property$MinHeight, Property$MinWidth, Property$Overflow, Property$OverflowX, Property$OverflowY, Property$VerticalAlign, Property$Width } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#layout
 

package/__flow__/systemProps/{position.js → position.flow.js}

@@ -2,7 +2,7 @@
 
 import { position } from 'styled-system';
 import type { Property$Bottom, Property$Left, Property$Position, Property$Right, Property$Top, Property$ZIndex } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#position
 

package/__flow__/systemProps/{shadow.js → shadow.flow.js}

@@ -2,7 +2,7 @@
 
 import { shadow } from 'styled-system';
 import type { Property$BoxShadow, Property$TextShadow } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#shadow
 

package/__flow__/systemProps/{space.js → space.flow.js}

@@ -3,7 +3,7 @@
 
 import { space } from 'styled-system';
 import type { Property$Margin, Property$MarginBottom, Property$MarginLeft, Property$MarginRight, Property$MarginTop, Property$Padding, Property$PaddingBottom, Property$PaddingLeft, Property$PaddingRight, Property$PaddingTop } from 'csstype';
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#space
 // prettier-ignore

package/__flow__/systemProps/{systemProps.js → systemProps.flow.js}

@@ -1,18 +1,18 @@
 // @flow strict-local
 import { compose } from 'styled-system';
-import { backgroundSystemProps, type TypeBackgroundSystemProps } from "./background";
-import { borderSystemProps, type TypeBorderSystemProps } from "./border";
-import { colorSystemProps, type TypeColorSystemProps } from "./color";
-import { customSystemProps, type TypeCustomSystemProps } from "./custom";
-import { flexboxSystemProps, type TypeFlexboxSystemProps } from "./flexbox";
-import { gridSystemProps, type TypeGridSystemProps } from "./grid";
-import { layoutSystemProps, type TypeLayoutSystemProps } from "./layout";
-import { positionSystemProps, type TypePositionSystemProps } from "./position";
-import { shadowSystemProps, type TypeShadowSystemProps } from "./shadow";
-import { spaceSystemProps, type TypeSpaceSystemProps } from "./space";
-import { typographySystemProps, type TypeTypographySystemProps } from "./typography";
-import { variantSystemProps, type TypeVariantSystemProps } from "./variant";
-import type { StyledSystemStyleFn } from "./types.flow.js";
+import { backgroundSystemProps, type TypeBackgroundSystemProps } from "./background.flow";
+import { borderSystemProps, type TypeBorderSystemProps } from "./border.flow";
+import { colorSystemProps, type TypeColorSystemProps } from "./color.flow";
+import { customSystemProps, type TypeCustomSystemProps } from "./custom.flow";
+import { flexboxSystemProps, type TypeFlexboxSystemProps } from "./flexbox.flow";
+import { gridSystemProps, type TypeGridSystemProps } from "./grid.flow";
+import { layoutSystemProps, type TypeLayoutSystemProps } from "./layout.flow";
+import { positionSystemProps, type TypePositionSystemProps } from "./position.flow";
+import { shadowSystemProps, type TypeShadowSystemProps } from "./shadow.flow";
+import { spaceSystemProps, type TypeSpaceSystemProps } from "./space.flow";
+import { typographySystemProps, type TypeTypographySystemProps } from "./typography.flow";
+import { variantSystemProps, type TypeVariantSystemProps } from "./variant.flow";
+import type { StyledSystemStyleFn } from "./types.flow";
 export type TypeSystemProps = $ReadOnly<{|
   ...TypeCustomSystemProps,
   ...TypeVariantSystemProps,

package/__flow__/systemProps/{typography.js → typography.flow.js}

@@ -3,7 +3,7 @@
 import { typography } from 'styled-system';
 import type { Property$FontFamily, Property$FontSize, Property$FontStyle, Property$FontWeight, Property$LetterSpacing, Property$LineHeight, Property$TextAlign } from 'csstype';
 import typeof { fontWeights as TypeofFontWeights } from "../themes/light/theme.flow";
-import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/table#typography
 

package/__flow__/systemProps/{variant.js → variant.flow.js}

@@ -1,7 +1,7 @@
 // @flow strict-local
 import { compose, variant } from 'styled-system';
 import type { TypeTypography } from "../types/theme.flow";
-import type { TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type { TypeResponsiveBaseSystemProp } from "./types.flow";
 
 // https://styled-system.com/variants
 

package/__flow__/types/shared.flow.js

@@ -1,5 +1,9 @@
 // @flow
-
+import * as React from 'react';
 export type TypeWithDisplayName<T> = T & {|
   displayName: string
+|};
+export type TypePropsWithChildren<T> = {|
+  ...T,
+  children?: React.Node,
 |};

package/commonjs/Card/Card.js

@@ -1,45 +1,90 @@
 "use strict";
-'no babel-plugin-flow-react-proptypes';
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styles = require("./styles");
-var _excluded = ["onClick", "href", "children", "ariaLabel", "buttonProps", "border", "borderColor", "color", "bg"];
+var _utils = require("./utils");
+var _subComponents = require("./subComponents");
+var _excluded = ["children", "disabled", "elevation", "href", "onClick", "role", "selected"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * @link https://seeds.sproutsocial.com/components/card/
+ *
+ * Avoid nesting interactive content inside a Card with role='button'.
+ *
+ * Interactive content: "a", "audio", "button", "embed", "iframe", "img", "input", "label", "select", "textarea", "video"
+ * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content
+ *
+ * @example
+ * <Card role="button" onClick={_onClick}>
+ *  <Button>Click me</Button>
+ * </Card>
+ */
+
 var Card = function Card(_ref) {
-  var onClick = _ref.onClick,
+  var children = _ref.children,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    elevation = _ref.elevation,
     href = _ref.href,
-    children = _ref.children,
-    ariaLabel = _ref.ariaLabel,
-    _ref$buttonProps = _ref.buttonProps,
-    buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
-    _ref$border = _ref.border,
-    border = _ref$border === void 0 ? 500 : _ref$border,
-    _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? 'container.border.base' : _ref$borderColor,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'text.body' : _ref$color,
-    _ref$bg = _ref.bg,
-    bg = _ref$bg === void 0 ? 'container.background.base' : _ref$bg,
+    onClick = _ref.onClick,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'presentation' : _ref$role,
+    selected = _ref.selected,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_styles.Container, _extends({}, rest, {
-    border: border,
-    borderColor: borderColor,
-    color: color,
-    bg: bg
-  }), /*#__PURE__*/React.createElement(_styles.ClickableArea, _extends({
-    "aria-label": ariaLabel,
-    onClick: onClick,
-    href: href
-  }, buttonProps), null), children);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasSubComponent = _useState2[0],
+    setHasSubComponent = _useState2[1];
+  var containerRef = (0, _react.useRef)(null);
+  var checkedConditions = role === 'checkbox' ? selected : undefined;
+  var handleClickConditions = function handleClickConditions(e) {
+    return role === 'link' ? (0, _utils.navigateTo)({
+      e: e,
+      href: href,
+      ref: containerRef
+    }) : onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    return (0, _utils.onKeyDown)({
+      e: e,
+      href: href,
+      onClick: onClick,
+      ref: containerRef,
+      role: role
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCard, _extends({
+    tabIndex: 0,
+    role: role,
+    onClick: handleClickConditions,
+    onKeyDown: handleKeyDown,
+    $elevation: elevation,
+    ref: containerRef,
+    $selected: selected,
+    "aria-checked": checkedConditions,
+    $disabled: disabled,
+    "aria-disabled": disabled && disabled,
+    $compositionalComponents: hasSubComponent
+  }, rest), /*#__PURE__*/_react.default.createElement(_subComponents.SelectedIcon, {
+    $selected: selected
+  }), /*#__PURE__*/_react.default.createElement(_utils.SubComponentContext.Provider, {
+    value: setHasSubComponent
+  }, children));
 };
 var _default = Card;
 exports.default = _default;

package/commonjs/Card/CardTypes.flow.js

@@ -0,0 +1,6 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/commonjs/Card/index.flow.js

@@ -13,4 +13,15 @@ Object.keys(_Card).forEach(function (key) {
       return _Card[key];
     }
   });
+});
+var _CardTypes = require("./CardTypes.flow");
+Object.keys(_CardTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CardTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardTypes[key];
+    }
+  });
 });

package/commonjs/Card/index.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  Card: true
+  Card: true,
+  CardHeader: true,
+  CardContent: true,
+  CardFooter: true
 };
 Object.defineProperty(exports, "Card", {
   enumerable: true,
@@ -12,8 +15,27 @@ Object.defineProperty(exports, "Card", {
     return _Card.default;
   }
 });
+Object.defineProperty(exports, "CardContent", {
+  enumerable: true,
+  get: function get() {
+    return _subComponents.CardContent;
+  }
+});
+Object.defineProperty(exports, "CardFooter", {
+  enumerable: true,
+  get: function get() {
+    return _subComponents.CardFooter;
+  }
+});
+Object.defineProperty(exports, "CardHeader", {
+  enumerable: true,
+  get: function get() {
+    return _subComponents.CardHeader;
+  }
+});
 exports.default = void 0;
 var _Card = _interopRequireDefault(require("./Card"));
+var _subComponents = require("./subComponents");
 var _CardTypes = require("./CardTypes");
 Object.keys(_CardTypes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;