@sproutsocial/racine 14.1.1 → 14.3.0

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # Change Log
 
+## 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
+
+- 16a0ef29: - Add team sprout icon variations
+
+### Patch Changes
+
+- 1c647238: Change `form.border.base` theme color to `neutral.600` to provide a color contrast ratio of 3:1 on all form elements
+- 8a0d5ba6: Update usage examples across the design system to remove placeholder text by default. Additionally, improve the color contrast of placeholder text and differentiate it from text values with italics.
+
 ## 14.1.1
 
 ### Patch Changes

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" | "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" | "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

@@ -333,6 +333,8 @@ module.exports = {
   "tasks": "0 0 12 16",
   "team-conversation-outline": "0 0 16 18",
   "team-conversation": "0 0 16 18",
+  "team-sprout-outline": "0 0 18 18",
+  "team-sprout": "0 0 18 18",
   "team": "0 0 18 16",
   "text-asset": "0 0 16 16",
   "text": "0 0 8 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/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");

package/commonjs/Checkbox/styles.js

@@ -59,13 +59,14 @@ var CheckboxBox = _styledComponents.default.div.withConfig({
 });
 exports.CheckboxBox = CheckboxBox;
 CheckboxBox.displayName = 'CheckboxBox';
-var CheckIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
+var CheckIcon = (0, _styledComponents.default)(_Icon.default).attrs({
+  'aria-hidden': true
+}).withConfig({
   displayName: "styles__CheckIcon",
   componentId: "sc-1hcgibh-3"
-})(["position:absolute;display:inline-flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:all ", " ", ";&,& .Icon-svg{width:10px;height:10px;line-height:10px;}"], function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
+})(["position:absolute;display:inline-flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:all ", ";&,& .Icon-svg{width:10px;height:10px;line-height:10px;}"], function (_ref) {
+  var theme = _ref.theme;
+  return "".concat(theme.duration.fast, " ").concat(theme.easing.ease_inout);
 });
 exports.CheckIcon = CheckIcon;
 CheckIcon.displayName = 'CheckIcon';
@@ -133,7 +134,7 @@ var CheckboxContainer = _styledComponents.default.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-1hcgibh-6"
 })(function (props) {
-  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, (0, _server.renderToStaticMarkup)(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
+  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, (0, _server.renderToStaticMarkup)(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.form.border.base, props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
 });
 exports.CheckboxContainer = CheckboxContainer;
 var _default = Container;

package/commonjs/DatePicker/common.js

@@ -18,7 +18,8 @@ var CalendarNavButton = function CalendarNavButton(_ref) {
   var type = _ref.type;
   return /*#__PURE__*/_react.default.createElement(_Icon.default, {
     size: "mini",
-    name: iconNames[type]
+    name: iconNames[type],
+    "aria-hidden": true
   });
 };
 exports.CalendarNavButton = CalendarNavButton;

package/commonjs/Drawer/Drawer.js

@@ -15,7 +15,7 @@ var _Text = _interopRequireDefault(require("../Text"));
 var _Portal = _interopRequireDefault(require("../Portal"));
 var _SlideTransition = require("./SlideTransition");
 var _styles = _interopRequireWildcard(require("./styles"));
-var _excluded = ["title", "children", "render"],
+var _excluded = ["title", "id", "children", "render"],
   _excluded2 = ["children"],
   _excluded3 = ["id", "style", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets"],
   _excluded4 = ["children", "closeButtonLabel", "direction", "disableCloseOnClickOutside", "id", "isOpen", "offset", "onClose", "zIndex", "closeTargets"];
@@ -53,12 +53,15 @@ var DrawerCloseButton = function DrawerCloseButton(props) {
     "aria-label": closeButtonLabel,
     onClick: onClose
   }, props), props.children || /*#__PURE__*/React.createElement(_Icon.default, {
+    "aria-hidden": true,
     name: "x"
   }));
 };
 var DrawerHeader = function DrawerHeader(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? undefined : _ref$id,
     children = _ref.children,
     render = _ref.render,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -77,7 +80,8 @@ var DrawerHeader = function DrawerHeader(_ref) {
     as: "h2",
     fontSize: 400,
     fontWeight: "semibold",
-    color: "text.headline"
+    color: "text.headline",
+    id: id
   }, title), /*#__PURE__*/React.createElement(DrawerCloseButton, null)));
 };
 var DrawerContent = function DrawerContent(_ref2) {
@@ -136,7 +140,7 @@ var Drawer = function Drawer(_ref3) {
   }, [onClose, disableCloseOnClickOutside, closeTargets]);
   return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
     key: id,
-    autoFocus: false,
+    autoFocus: true,
     returnFocus: true
   }, /*#__PURE__*/React.createElement(AnimatedDrawer, _extends({
     ref: drawerRef,
@@ -144,7 +148,8 @@ var Drawer = function Drawer(_ref3) {
     width: DRAWER_WIDTH,
     offset: offset,
     direction: direction,
-    "data-qa-drawer": id
+    "data-qa-drawer": id,
+    role: "dialog"
   }, rest), children));
 };
 var DrawerContainer = function DrawerContainer(_ref4) {

package/commonjs/Icon/Icon.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _IconViewBoxes = _interopRequireDefault(require("../IconViewBoxes"));
 var _Box = _interopRequireDefault(require("../Box"));
-var iconViewBoxes = _interopRequireWildcard(require("../IconViewBoxes"));
-var _styles = _interopRequireDefault(require("./styles"));
+var _PartnerLogo = _interopRequireWildcard(require("../PartnerLogo"));
+var _utils = require("../utils");
 var _deprecatedIcons = _interopRequireDefault(require("./deprecatedIcons"));
-var _excluded = ["name", "size", "fixedWidth", "ariaLabel"],
+var _styles = _interopRequireDefault(require("./styles"));
+var _excluded = ["name", "size", "fixedWidth", "ariaLabel", "color", "svgProps"],
   _excluded2 = ["activeName", "inactiveName", "isActive", "size", "fixedWidth", "ariaLabel"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -26,20 +28,40 @@ var Icon = function Icon(_ref) {
     _ref$fixedWidth = _ref.fixedWidth,
     fixedWidth = _ref$fixedWidth === void 0 ? false : _ref$fixedWidth,
     ariaLabel = _ref.ariaLabel,
+    color = _ref.color,
+    svgProps = _ref.svgProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  if ((0, _utils.includes)(_PartnerLogo.PartnerNames, name)) {
+    // Icon's "default" size is equivalent to PartnerLogo's "small" size
+    var logoSize = size === 'default' ? 'small' : size;
+    var logoProps = {
+      partnerName: name,
+      size: logoSize,
+      logoType: 'symbol',
+      svgProps: svgProps
+    };
+    return /*#__PURE__*/React.createElement(_PartnerLogo.default
+    // ariaLabel needs to be overridable by aria-label prop in ...rest
+    , _extends({
+      "aria-label": ariaLabel
+    }, rest, logoProps));
+  }
   var iconName = _deprecatedIcons.default[name] || name;
-  var iconViewBox = iconViewBoxes[iconName];
+  var iconViewBox = _IconViewBoxes.default[iconName];
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     iconSize: size,
     fixedWidth: !!fixedWidth,
     key: name,
+    role: "img",
     "aria-label": ariaLabel,
-    "data-qa-icon": name
-  }, rest), /*#__PURE__*/React.createElement("svg", {
+    "data-qa-icon": name,
+    color: color
+  }, rest), /*#__PURE__*/React.createElement("svg", _extends({
     className: "Icon-svg",
     viewBox: iconViewBox,
-    focusable: false
-  }, /*#__PURE__*/React.createElement("use", {
+    focusable: false,
+    "data-qa-icon-svg": "".concat(name, "-svg")
+  }, svgProps), /*#__PURE__*/React.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#ssiconsvg-".concat(iconName)
   })));
@@ -73,18 +95,36 @@ var IconToggle = function IconToggle(_ref2) {
     name: activeName,
     size: size,
     fixedWidth: fixedWidth,
-    ariaLabel: ariaLabel,
+    "aria-label": ariaLabel,
     "aria-hidden": !isActive
   }), /*#__PURE__*/React.createElement(ToggleableIcon, {
     active: !isActive,
     name: inactiveName,
     size: size,
     fixedWidth: fixedWidth,
-    ariaLabel: ariaLabel,
+    "aria-label": ariaLabel,
     "aria-hidden": isActive
   }));
 };
 IconToggle.displayName = 'Icon.Toggle';
+/**
+ * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
+ *
+ * @example
+ * const [toggleState, setToggleState] = useState(false);
+ * <Button  // Wrap Icon.Toggle with Button
+ *  appearance='pill'
+ *  aria-label='like' // required for accessibility
+ *  aria-pressed={toggleState} // required for accessibility
+ *  onClick={() => setToggleState(!toggleState)}
+ * >
+ *  <Icon.Toggle
+ *    activeName="like"
+ *    inactiveName="like-outline"
+ *    isActive={toggleState}
+ *   />
+ * </Button>
+ */
 Icon.Toggle = IconToggle;
 var _default = Icon;
 exports.default = _default;

package/commonjs/IconViewBoxes.js

@@ -335,6 +335,8 @@ module.exports = {
   "tasks": "0 0 12 16",
   "team-conversation-outline": "0 0 16 18",
   "team-conversation": "0 0 16 18",
+  "team-sprout-outline": "0 0 18 18",
+  "team-sprout": "0 0 18 18",
   "team": "0 0 18 16",
   "text-asset": "0 0 16 16",
   "text": "0 0 8 16",

package/commonjs/IllustrationViewBoxes.d.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/commonjs/Indicator/Indicator.js

@@ -48,7 +48,8 @@ var Indicator = /*#__PURE__*/function (_React$Component) {
         tabIndex: 0
       }, rest), tooltip && /*#__PURE__*/React.createElement("div", null, tooltip), /*#__PURE__*/React.createElement(_Icon.default, {
         name: "indicator",
-        size: "mini"
+        size: "mini",
+        "aria-hidden": true
       }));
     }
   }]);

package/commonjs/Input/Input.js

@@ -71,7 +71,8 @@ var ClearButton = function ClearButton() {
     ariaLabel: clearButtonLabel || 'Clear',
     color: "icon.base"
   }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "circlex"
+    name: "circlex",
+    "aria-hidden": true
   }));
 };
 ClearButton.displayName = 'Input.ClearButton';

package/commonjs/Input/styles.js

@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-4stdun-0"
-})(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;margin:0;padding:", ";font-size:", ";line-height:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";}", " ", "}", " ", " ", " ", " ", ""], function (props) {
+})(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;margin:0;padding:", ";font-size:", ";line-height:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";font-style:italic;}", " ", "}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.radii[500];
 }, function (props) {
   return props.theme.colors.form.background.base;

package/commonjs/Listbox/Listbox.js

@@ -102,7 +102,8 @@ var ListboxButton = function ListboxButton(_ref2) {
     size: restProps.size
   }, /*#__PURE__*/React.createElement(_Icon.default, {
     name: "chevron-down",
-    fixedWidth: true
+    fixedWidth: true,
+    "aria-hidden": true
   })));
 };
 exports.ListboxButton = ListboxButton;

package/commonjs/LogoViewBoxes.d.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/commonjs/PartnerLogo/PartnerLogo.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = require("styled-components");
 var logoViewBoxes = _interopRequireWildcard(require("../LogoViewBoxes"));
 var _styles = _interopRequireDefault(require("./styles"));
-var _excluded = ["partnerName", "backgroundType", "logoType", "height", "width", "size", "color"];
+var _excluded = ["partnerName", "backgroundType", "logoType", "height", "width", "size", "aria-label", "svgProps"];
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,16 +19,18 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var PartnerLogo = function PartnerLogo(_ref) {
   var partnerName = _ref.partnerName,
     backgroundType = _ref.backgroundType,
-    logoType = _ref.logoType,
+    _ref$logoType = _ref.logoType,
+    logoType = _ref$logoType === void 0 ? 'symbol' : _ref$logoType,
     height = _ref.height,
     width = _ref.width,
     size = _ref.size,
-    color = _ref.color,
+    ariaLabel = _ref['aria-label'],
+    svgProps = _ref.svgProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = (0, _styledComponents.useTheme)(),
     mode = _useTheme.mode;
   var whichLogo = function whichLogo(type) {
-    var logo = logoType ? partnerName + '-' + logoType : partnerName;
+    var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
     if (type && type === 'dark') {
       return "".concat(logo, "-dark");
     } else if (type && type === 'light') {
@@ -48,17 +50,16 @@ var PartnerLogo = function PartnerLogo(_ref) {
     height: height ? height : defaultHeight + 'px',
     width: width ? width : defaultWidth + 'px',
     logoSize: size,
-    className: "logo"
-    // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    ,
-    color: color
-  }, rest), /*#__PURE__*/_react.default.createElement("svg", {
+    className: "logo",
+    role: "img",
+    "aria-label": ariaLabel,
+    "data-qa-logo": partnerName
+  }, rest), /*#__PURE__*/_react.default.createElement("svg", _extends({
     className: "logo-svg",
     viewBox: logoViewBox,
-    focusable: false
-  }, /*#__PURE__*/_react.default.createElement("use", {
+    focusable: false,
+    "data-qa-logo-svg": "".concat(partnerName, "-svg")
+  }, svgProps), /*#__PURE__*/_react.default.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#sslogosvg-".concat(whichLogo(backgroundType))
   })));

package/commonjs/PartnerLogo/PartnerLogoTypes.js

@@ -2,4 +2,15 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.PartnerNames = exports.PartnerLogoSizes = void 0;
+var PartnerNames = ['apple-app-store', 'bigcommerce', 'bitly', 'bynder', 'canva', 'dropbox', 'facebook', 'facebook-audience-network', 'facebook-groups', 'facebook-shops', 'feedly', 'glassdoor', 'google-analytics', 'google-business-messages', 'google-drive', 'google-my-business', 'google-play-store', 'hubspot', 'instagram', 'linkedin', 'linkedin-audience-network', 'marketo', 'messenger', 'microsoft-dynamics', 'pinterest', 'reddit', 'salesforce', 'shopify', 'slack', 'sproutsocial', 'tiktok', 'tripadvisor', 'tumblr', 'twitter', 'twitter-audience-network', 'whatsapp', 'woocommerce', 'yelp', 'youtube', 'zendesk'];
+exports.PartnerNames = PartnerNames;
+var PartnerLogoSizes = {
+  mini: '12px',
+  small: '16px',
+  medium: '24px',
+  large: '32px',
+  jumbo: '64px'
+};
+exports.PartnerLogoSizes = PartnerLogoSizes;

package/commonjs/PartnerLogo/index.js

@@ -26,18 +26,6 @@ Object.keys(_PartnerLogoTypes).forEach(function (key) {
     }
   });
 });
-var _TypePartnerNames = require("./TypePartnerNames");
-Object.keys(_TypePartnerNames).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TypePartnerNames[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _TypePartnerNames[key];
-    }
-  });
-});
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = _PartnerLogo.default;
 exports.default = _default;

package/commonjs/PartnerLogo/styles.js

@@ -20,7 +20,7 @@ var sizes = {
 
 // TODO: remove width from stylesForSize
 var stylesForSize = function stylesForSize(height, width, logoSize) {
-  return (0, _styledComponents.css)(["line-height:", ";&,.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : '');
+  return (0, _styledComponents.css)(["height:", ";line-height:", ";.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : '');
 };
 var Container = (0, _styledComponents.default)('span').withConfig({
   displayName: "styles__Container",

package/commonjs/Select/Select.js

@@ -92,7 +92,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(_Icon.default, {
         name: "chevron-down",
         fixedWidth: true,
-        size: this.props.size === 'small' ? 'mini' : 'default'
+        size: this.props.size === 'small' ? 'mini' : 'default',
+        "aria-hidden": true
       })));
     }
   }]);

package/commonjs/Switch/Switch.js

@@ -74,6 +74,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "data-qa-switch-isdisabled": disabled === true,
         checked: checked
       }, qa, rest), /*#__PURE__*/React.createElement(_VisuallyHidden.VisuallyHidden, null, checked ? a11yLabels.on : a11yLabels.off), checked ? /*#__PURE__*/React.createElement(_Icon.default, {
+        "aria-hidden": true,
         size: "mini",
         name: "check"
       }) : null);

package/commonjs/TableHeaderCell/TableHeaderCell.js

@@ -49,7 +49,8 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       }
       return /*#__PURE__*/React.createElement(_styles.SortIcon, null, /*#__PURE__*/React.createElement(_Icon.default, {
         size: "mini",
-        name: iconName
+        name: iconName,
+        "aria-hidden": true
       }));
     });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {