@sproutsocial/racine 14.2.0 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # Change Log
 
+## 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
+
+- 3e367848: Token A11y fixes:
+  - Add `aria-label` and `aria-hidden` to `Icons` in stories
+  - Add a visual indicator for invalid tokens
+  - Adjust styling
+  - Fix bug with error text token in Racine theme
+- 539fa582: Visual changes to bitly, canva, glassdoor, and whatsapp icons
+
+  - Now that the Icon component renders PartnerLogos, the old Icon version of any icon with a PartnerLogo equivalent is no longer available for use.
+  - In most cases, the icon and the partner logo with the same name looked almost identical.
+  - However, a few icons had a different design when rendered as an Icon.
+    - bitly
+    - glassdoor
+    - canva
+    - whatsapp
+  - There is no migration necessary, but please be aware that if you are currently using Icon to render an icon for any of these partners (e.g., `<Icon name="bitly" />`), the resulting icons will change visually.
+
+  Before and after image with the old Icon versions on the left and the new PartnerLogo versions on the right:
+
+  ![](https://user-images.githubusercontent.com/15218445/229627530-778f5604-c470-4176-9013-b3f5b4e236a1.png)
+
+- 539fa582: Removes uncolored network icons with PartnerLogo equivalents
+  - Previously, the following icons had no pre-filled color when rendered using Icon.
+    - canva, dropbox, facebook, facebook-audience-network, facebook-groups, feedly, glassdoor, google-drive, instagram, linkedin, linkedin-audience-network, messenger, pinterest, reddit, salesforce, slack, tumblr, twitter, twitter-audience-network, youtube, and zendesk
+  - Now that Icon serves as a pass-through to PartnerLogo, dark mode-compatible network coloring is built into these icons.
+- 539fa582: Allows rendering PartnerLogos using Icon
+  - The Icon component has been updated to render a PartnerLogo with `logoType` "symbol" when a valid `partnerName` is passed as the `name` prop to `Icon`.
+  - This behavior is provided as a developer utility only:
+    - Logos rendered this way should still follow the same semantic rules as any other PartnerLogo.
+    - PartnerLogo is still recommended for direct usage, and it is still the only way to render `wordmark` or `lockup` PartnerLogos.
+- 539fa582: Adds "symbol" logoType to PartnerLogo
+  - The "symbol" `logoType` corresponds to the icon-like version of the specified partner's logo.
+  - This version of a logo was previously accessible only by omitting the `logoType` prop.
+  - "symbol" is now the explicit default value for PartnerLogo's `logoType` prop. It was already the implicit default, so there will not be any change in behavior for existing PartnerLogo components that do not specify a `logoType`.
+- 539fa582: Add `svgProps` to `Icon` and `PartnerLogo` components to allow passing props to the `svg`, such as for accessbility.
+- f2f060a4: To provide a better experiance for users using assitive technologies. `Drawer` components will now include `role="dialog"` and receive autofocus when opened. `Drawer.Header` components will now allow optional `id` prop to allow `Drawer` components to leverage `aria-labelledby` attribute. `Icon` components inside `Drawer.Header` will now include `aria-hidden="true"`
+
+### Patch Changes
+
+- 539fa582: Removes nonfunctional PartnerLogo 'color' prop
+  - There were references to a `color` prop in the PartnerLogo component
+  - However, passing a `color` prop would not actually have any effect because PartnerLogo colors are locked per theme
+  - References to this prop have been removed
+- 539fa582: Updates PartnerLogo width logic
+  - Applies a width property to the logo-svg itself only, not the containing element, to fix layout issues such as padding not being applied to PartnerLogos when using `display="flex"`.
+  - This may lead to small layout changes for existing PartnerLogos.
+- 8814fba7: Sync icons from Figma
+- 539fa582: `PartnerLogo` and `Icon` components will now include `role="img"` and an `aria-label` or `aria-hidden` should now be passed to make these accessible.
+- 34f778af: fixes a bug that prevents fill colors from being removed from icons
+
 ## 14.2.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__/Icon/Icon.flow.js

@@ -5,6 +5,7 @@ import type { EnumIconNames } from "../EnumIconNames.flow";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 import type { TypeTheme } from "../types/theme.flow";
 import deprecatedIcons from "./deprecatedIcons.flow";
+import type { TypePartnerNames } from "../PartnerLogo/TypePartnerNames.flow";
 export type TypeIconSize = 'mini' // 12x12
 // TODO: deprecate default  in favor of small in future release
 | 'default' // 16x16
@@ -13,7 +14,7 @@ export type TypeIconSize = 'mini' // 12x12
 | 'large' // 32x32
 | 'jumbo'; // 64x64
 
-export type TypeIconName = EnumIconNames | $Keys<typeof deprecatedIcons>;
+export type TypeIconName = EnumIconNames | $Keys<typeof deprecatedIcons> | TypePartnerNames;
 export type TypeIconProps = {
   /** Name of the icon in the svg sprite */
   name: TypeIconName,
@@ -22,6 +23,7 @@ export type TypeIconProps = {
   fixedWidth?: boolean,
   /** Label used to describe the icon if not used with an accompanying visual label */
   ariaLabel?: string,
+  svgProps?: {...},
   ...
 };
 export type TypeToggleProps = {

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__/PartnerLogo/PartnerLogo.flow.js

@@ -6,7 +6,7 @@ export type TypePartnerLogoProps = {
   partnerName: TypePartnerNames,
   /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
   backgroundType?: 'dark' | 'light',
-  logoType?: 'wordmark' | 'lockup',
+  logoType?: 'symbol' | 'wordmark' | 'lockup',
   height?: string,
   width?: string,
   size?: 'mini' // 12x12
@@ -14,8 +14,8 @@ export type TypePartnerLogoProps = {
   | 'medium' // 24x24
   | 'large' // 32x32
   | 'jumbo',
-
-    // 64x64
+  // 64x64
+  svgProps?: {...},
   ...
 };
 declare var PartnerLogo: React.StatelessFunctionalComponent<TypePartnerLogoProps>;

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/Badge/Badge.js

@@ -52,7 +52,8 @@ var Badge = function Badge(_ref) {
   }, iconName ? /*#__PURE__*/React.createElement(_Icon.default, {
     mr: 200,
     name: iconName,
-    size: size === 'small' ? 'mini' : 'default'
+    size: size === 'small' ? 'mini' : 'default',
+    "aria-hidden": true
   }) : null, children || text));
 };
 var _default = Badge;

package/commonjs/Banner/Banner.js

@@ -82,7 +82,8 @@ var Banner = function Banner(_ref) {
     onClick: onClose,
     ariaLabel: closeButtonLabel
   }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "x"
+    name: "x",
+    "aria-hidden": true
   })))));
 };
 var _default = Banner;

package/commonjs/Breadcrumb/Breadcrumb.js

@@ -49,7 +49,8 @@ var Breadcrumb = function Breadcrumb(_ref2) {
     px: 200,
     py: 0
   }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "dotdotdot"
+    name: "dotdotdot",
+    "aria-hidden": true
   }))), listItems.map(function (item, i) {
     // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props
     var itemElem = _typeof(item) === 'object' && 'props' in item ? item : /*#__PURE__*/React.createElement("span", null, "item");