@sproutsocial/racine 14.2.0 → 15.0.0

package/icons/send-again-outline.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
   <path d="M1.881 6.38l13.993-4.254L13.937 8.5h1.567l2.077-6.834A1 1 0 0016.334.42L.703 5.169a1 1 0 00-.46 1.617l3.507 3.997v2.567a.9.9 0 00.9.9h2.568L8.5 15.376V13.38l-.717-.63H5.25l7.231-7.231c.216-.216-.07-.557-.32-.382l-7.043 4.93L1.881 6.38zM11.988 18h-.234c.078.01.156.01.234 0z"/>
-  <path fill="#364141" d="M11.5 17.086V18H10v-3.75h3.5v1.5h-1.244a2.572 2.572 0 004.21-.886l1.398.546a4.072 4.072 0 01-6.364 1.676zm5-6.172V10H18v3.75h-3.5v-1.5h1.244a2.572 2.572 0 00-4.21.886l-1.398-.546a4.072 4.072 0 016.364-1.676z"/>
+  <path d="M11.5 17.086V18H10v-3.75h3.5v1.5h-1.244a2.572 2.572 0 004.21-.886l1.398.546a4.072 4.072 0 01-6.364 1.676zm5-6.172V10H18v3.75h-3.5v-1.5h1.244a2.572 2.572 0 00-4.21.886l-1.398-.546a4.072 4.072 0 016.364-1.676z"/>
 </svg>

package/icons/send-again.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
   <path fill-rule="evenodd" d="M16.416.33L.726 5.283a1 1 0 00-.443 1.62L3.5 10.5v3a1 1 0 001 1h3l1 .895V13.5a5 5 0 015-5h1.987l2.184-6.916A1 1 0 0016.416.329zM5 10l8.042-5.744c.25-.179.54.163.322.38L5 13v-3z" clip-rule="evenodd"/>
-  <path fill="#364141" d="M11.5 17.086V18H10v-3.75h3.5v1.5h-1.244a2.572 2.572 0 004.21-.886l1.398.546a4.072 4.072 0 01-6.364 1.676zm5-6.171V10H18v3.75h-3.5v-1.5h1.244a2.572 2.572 0 00-4.21.886l-1.398-.546a4.072 4.072 0 016.364-1.675z"/>
+  <path d="M11.5 17.086V18H10v-3.75h3.5v1.5h-1.244a2.572 2.572 0 004.21-.886l1.398.546a4.072 4.072 0 01-6.364 1.676zm5-6.171V10H18v3.75h-3.5v-1.5h1.244a2.572 2.572 0 00-4.21.886l-1.398-.546a4.072 4.072 0 016.364-1.675z"/>
 </svg>

package/icons/tasks-check.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
   <path d="M1.75 0h6.377a5.251 5.251 0 003.314 8.438A3.26 3.26 0 0112 10.25a.75.75 0 01-.75.75H7v3.25a.25.25 0 01-.026.112l-.75 1.5a.25.25 0 01-.448 0l-.75-1.5A.25.25 0 015 14.25V11H.75a.75.75 0 01-.75-.75C0 8.664 1.17 7.4 2.687 6.696L3.069 3H1.75A.75.75 0 011 2.25V.75A.75.75 0 011.75 0z"/>
-  <path fill="#364141" d="M15.55 2.01L11.8 6.048 9.002 3.561l.996-1.122L11.7 3.952 14.45.99l1.1 1.02z"/>
+  <path d="M15.55 2.01L11.8 6.048 9.002 3.561l.996-1.122L11.7 3.952 14.45.99l1.1 1.02z"/>
 </svg>

package/icons/tumblr.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M14.286 0H1.714C.768 0 0 .768 0 1.714v12.572C0 15.232.768 16 1.714 16h12.572c.946 0 1.714-.768 1.714-1.714V1.714C16 .768 15.232 0 14.286 0zm-2.94 13.007c-.303.325-1.114.707-2.175.707-2.696 0-3.282-1.982-3.282-3.139V7.361H4.83a.223.223 0 01-.222-.222V5.621c0-.16.1-.303.254-.357C6.247 4.775 6.68 3.568 6.744 2.65c.018-.246.146-.364.357-.364h1.582c.122 0 .222.1.222.221V5.08h1.853c.122 0 .222.1.222.221v1.825c0 .121-.1.221-.222.221h-1.86v2.975c0 .765.528 1.197 1.517.8.107-.042.2-.071.286-.05.079.018.129.075.164.175l.493 1.436c.036.114.072.24-.01.325z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
+  <path fill="#35465C" d="M14.286 0H1.714C.768 0 0 .768 0 1.714v12.572C0 15.232.768 16 1.714 16h12.572c.946 0 1.714-.768 1.714-1.714V1.714C16 .768 15.232 0 14.286 0zm-2.94 13.007c-.303.325-1.114.707-2.175.707-2.696 0-3.282-1.982-3.282-3.139V7.361H4.83a.223.223 0 01-.222-.222V5.621c0-.16.1-.303.254-.357C6.247 4.775 6.68 3.568 6.744 2.65c.018-.246.146-.364.357-.364h1.582c.122 0 .222.1.222.221V5.08h1.853c.122 0 .222.1.222.221v1.825c0 .121-.1.221-.222.221h-1.86v2.975c0 .765.528 1.197 1.517.8.107-.042.2-.071.286-.05.079.018.129.075.164.175l.493 1.436c.036.114.072.24-.01.325z"/>
 </svg>

package/icons/twitter.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16">
-  <path d="M15.253 4.489c.01.153.01.306.01.46C15.263 9.618 11.758 15 5.35 15A9.748 9.748 0 010 13.414c.28.033.55.044.841.044a6.917 6.917 0 004.326-1.51 3.497 3.497 0 01-3.258-2.45 3.66 3.66 0 001.575-.065A3.521 3.521 0 01.69 5.966v-.044a3.473 3.473 0 001.575.448A3.543 3.543 0 01.712 3.428c0-.656.172-1.258.475-1.783A9.86 9.86 0 008.37 5.342a4.042 4.042 0 01-.087-.81C8.284 2.587 9.838 1 11.768 1c1.004 0 1.91.427 2.546 1.116a6.802 6.802 0 002.211-.854 3.515 3.515 0 01-1.531 1.947A6.91 6.91 0 0017 2.663a7.548 7.548 0 01-1.747 1.826z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 16">
+  <path fill="#1DA1F2" d="M15.253 4.489c.01.153.01.306.01.46C15.263 9.618 11.758 15 5.35 15A9.748 9.748 0 010 13.414c.28.033.55.044.841.044a6.917 6.917 0 004.326-1.51 3.497 3.497 0 01-3.258-2.45 3.66 3.66 0 001.575-.065A3.521 3.521 0 01.69 5.966v-.044a3.473 3.473 0 001.575.448A3.543 3.543 0 01.712 3.428c0-.656.172-1.258.475-1.783A9.86 9.86 0 008.37 5.342a4.042 4.042 0 01-.087-.81C8.284 2.587 9.838 1 11.768 1c1.004 0 1.91.427 2.546 1.116a6.802 6.802 0 002.211-.854 3.515 3.515 0 01-1.531 1.947A6.91 6.91 0 0017 2.663a7.548 7.548 0 01-1.747 1.826z"/>
 </svg>

package/icons/youtube.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15">
-  <path d="M15.666 3.721A1.988 1.988 0 0014.25 2.33C13.003 2 8 2 8 2s-5.003 0-6.251.329A1.988 1.988 0 00.334 3.721C0 4.95 0 7.511 0 7.511s0 2.562.334 3.79c.184.678.727 1.189 1.415 1.37C2.997 13 8 13 8 13s5.003 0 6.251-.329c.689-.181 1.23-.692 1.415-1.37.334-1.228.334-3.79.334-3.79s0-2.562-.334-3.79zM6.364 9.837V5.185l4.181 2.326-4.181 2.326z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 15">
+  <path fill="red" d="M15.666 3.721A1.988 1.988 0 0014.25 2.33C13.003 2 8 2 8 2s-5.003 0-6.251.329A1.988 1.988 0 00.334 3.721C0 4.95 0 7.511 0 7.511s0 2.562.334 3.79c.184.678.727 1.189 1.415 1.37C2.997 13 8 13 8 13s5.003 0 6.251-.329c.689-.181 1.23-.692 1.415-1.37.334-1.228.334-3.79.334-3.79s0-2.562-.334-3.79zM6.364 9.837V5.185l4.181 2.326-4.181 2.326z"/>
 </svg>

package/icons/zendesk.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M7.39 14.124V5.202L0 14.124h7.39zM6.308 4.613A3.695 3.695 0 007.39 2H0a3.695 3.695 0 006.308 2.613zm3.382 6.899a3.695 3.695 0 00-1.082 2.613h7.39a3.695 3.695 0 00-6.308-2.613zM8.608 2v8.923L16 2H8.608z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
+  <path fill="#03363D" d="M7.39 14.124V5.202L0 14.124h7.39zM6.308 4.613A3.695 3.695 0 007.39 2H0a3.695 3.695 0 006.308 2.613zm3.382 6.899a3.695 3.695 0 00-1.082 2.613h7.39a3.695 3.695 0 00-6.308-2.613zM8.608 2v8.923L16 2H8.608z"/>
 </svg>

package/lib/Badge/Badge.js

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

package/lib/Banner/Banner.js

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

package/lib/Breadcrumb/Breadcrumb.js

@@ -40,7 +40,8 @@ var Breadcrumb = function Breadcrumb(_ref2) {
     px: 200,
     py: 0
   }, /*#__PURE__*/React.createElement(Icon, {
-    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/lib/Card/Card.js

@@ -1,36 +1,81 @@
-'no babel-plugin-flow-react-proptypes';
-
-var _excluded = ["onClick", "href", "children", "ariaLabel", "buttonProps", "border", "borderColor", "color", "bg"];
+var _excluded = ["children", "disabled", "elevation", "href", "onClick", "role", "selected"];
 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; }
-import * as React from 'react';
-import { Container, ClickableArea } from "./styles";
+import React, { useRef, useState } from 'react';
+import { StyledCard } from "./styles";
+import { SubComponentContext, navigateTo, onKeyDown } from "./utils";
+import { SelectedIcon } from "./subComponents";
+
+/**
+ * @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(Container, _extends({}, rest, {
-    border: border,
-    borderColor: borderColor,
-    color: color,
-    bg: bg
-  }), /*#__PURE__*/React.createElement(ClickableArea, _extends({
-    "aria-label": ariaLabel,
-    onClick: onClick,
-    href: href
-  }, buttonProps), null), children);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasSubComponent = _useState2[0],
+    setHasSubComponent = _useState2[1];
+  var containerRef = useRef(null);
+  var checkedConditions = role === 'checkbox' ? selected : undefined;
+  var handleClickConditions = function handleClickConditions(e) {
+    return role === 'link' ? navigateTo({
+      e: e,
+      href: href,
+      ref: containerRef
+    }) : onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    return onKeyDown({
+      e: e,
+      href: href,
+      onClick: onClick,
+      ref: containerRef,
+      role: role
+    });
+  };
+  return /*#__PURE__*/React.createElement(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.createElement(SelectedIcon, {
+    $selected: selected
+  }), /*#__PURE__*/React.createElement(SubComponentContext.Provider, {
+    value: setHasSubComponent
+  }, children));
 };
 export default Card;

package/lib/Card/CardTypes.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/Card/index.flow.js

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

package/lib/Card/styles.js

@@ -1,22 +1,98 @@
 import styled from 'styled-components';
-import Box from "../Box";
-import Button from "../Button";
-var Container = styled(Box).withConfig({
-  displayName: "styles__Container",
-  componentId: "sc-1t1hrf6-0"
-})(["width:100%;border-radius:", ";position:relative;z-index:0;::after{content:'';top:0;left:0;position:absolute;border-radius:", ";z-index:-1;width:100%;height:100%;opacity:0;box-shadow:", ";transition:opacity ", " ", ";}&:hover{&::after{opacity:1;}}[role='button'],[type='button'],a{position:relative;}"], function (props) {
-  return props.theme.radii.outer;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.theme.shadows.low;
-}, function (props) {
-  return props.theme.duration.medium;
-}, function (props) {
-  return props.theme.easing.ease_inout;
+import { border, color, flexbox, grid, layout, position, space } from 'styled-system';
+import { focusRing, disabled } from "../utils/mixins";
+import Icon from "../Icon";
+
+// TODO: Would be really cool to cherry pick specific props from style functions. For example,
+// removing the css prop 'color' from the color function or importing just the specific
+// props the component needs. It appears to be possible with some and not others.
+// https://github.com/styled-system/styled-system/issues/1569
+
+export var StyledCardContent = styled.div.withConfig({
+  displayName: "styles__StyledCardContent",
+  componentId: "sc-9tyqu4-0"
+})(["display:flex;flex-direction:column;padding:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  return theme.space[400];
+}, border, color, flexbox, grid, layout, space);
+export var StyledCardHeader = styled(StyledCardContent).withConfig({
+  displayName: "styles__StyledCardHeader",
+  componentId: "sc-9tyqu4-1"
+})(["flex-direction:row;border-bottom:", ";border-top-left-radius:", ";border-top-right-radius:", ";", " ", " ", " ", " ", " ", ""], function (_ref2) {
+  var theme = _ref2.theme;
+  return "".concat(theme.borderWidths[500], " solid\n  ").concat(theme.colors.container.border.base);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.radii.inner;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.radii.inner;
+}, border, color, flexbox, grid, layout, space);
+export var StyledCardFooter = styled(StyledCardContent).withConfig({
+  displayName: "styles__StyledCardFooter",
+  componentId: "sc-9tyqu4-2"
+})(["flex-direction:row;border-top:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";", " ", " ", " ", " ", " ", ""], function (_ref5) {
+  var theme = _ref5.theme;
+  return "".concat(theme.borderWidths[500], " solid\n  ").concat(theme.colors.container.border.base);
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.radii.inner;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.radii.inner;
+}, border, color, flexbox, grid, layout, space);
+export var SelectedIconWrapper = styled.div.withConfig({
+  displayName: "styles__SelectedIconWrapper",
+  componentId: "sc-9tyqu4-3"
+})(["display:flex;align-items:center;justify-content:center;position:absolute;top:-8px;right:-8px;"]);
+export var StyledSelectedIcon = styled(Icon).withConfig({
+  displayName: "styles__StyledSelectedIcon",
+  componentId: "sc-9tyqu4-4"
+})(["border-radius:50%;background:", ";opacity:0;transition:opacity ", ";", ""], function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.colors.container.background.base;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.duration.medium;
+}, function (_ref10) {
+  var $selected = _ref10.$selected;
+  return $selected && "\n    opacity: 1;\n  ";
 });
-var ClickableArea = styled(Button).withConfig({
-  displayName: "styles__ClickableArea",
-  componentId: "sc-1t1hrf6-1"
-})(["position:absolute !important;top:0;bottom:0;left:0;right:0;width:100%;"]);
-export { Container, ClickableArea };
+export var StyledCard = styled.div.withConfig({
+  displayName: "styles__StyledCard",
+  componentId: "sc-9tyqu4-5"
+})(["position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;background:", ";border:", " solid ", ";padding:", ";border-radius:", ";transition:box-shadow ", ",border ", ";&[role='link'],&[role='button'],&[role='checkbox']{cursor:pointer;}&:hover{box-shadow:", ";}&:focus{", "}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colors.container.background.base;
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.borderWidths[500];
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.colors.container.border.base;
+}, function (_ref14) {
+  var theme = _ref14.theme,
+    $compositionalComponents = _ref14.$compositionalComponents;
+  return $compositionalComponents ? 0 : theme.space[400];
+}, function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.radii.outer;
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.duration.medium;
+}, function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.duration.medium;
+}, function (_ref18) {
+  var theme = _ref18.theme,
+    _ref18$$elevation = _ref18.$elevation,
+    $elevation = _ref18$$elevation === void 0 ? 'low' : _ref18$$elevation;
+  return theme.shadows[$elevation];
+}, focusRing, function (_ref19) {
+  var $disabled = _ref19.$disabled;
+  return $disabled && "\n    ".concat(disabled, "\n  ");
+}, function (_ref20) {
+  var $selected = _ref20.$selected,
+    theme = _ref20.theme;
+  return $selected && "\n    border: ".concat(theme.borderWidths[500], " solid ").concat(theme.colors.container.border.selected, ";  \n  ");
+}, border, color, flexbox, grid, layout, position, space);

package/lib/Card/subComponents.js

@@ -0,0 +1,37 @@
+var _excluded = ["children"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"];
+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; }
+import React from 'react';
+import { useChildContext } from "./utils";
+import { StyledCardContent, StyledCardHeader, StyledCardFooter, StyledSelectedIcon, SelectedIconWrapper } from "./styles";
+export var CardContent = function CardContent(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // TODO: It could be cool to possibly adjust the context to include an array of names of child components.
+  // Then, if CardHeader or CardFooter aren't used with CardContent throw an error.
+  useChildContext();
+  return /*#__PURE__*/React.createElement(StyledCardContent, rest, children);
+};
+export var CardHeader = function CardHeader(_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  useChildContext();
+  return /*#__PURE__*/React.createElement(StyledCardHeader, rest, children);
+};
+export var CardFooter = function CardFooter(_ref3) {
+  var children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  useChildContext();
+  return /*#__PURE__*/React.createElement(StyledCardFooter, rest, children);
+};
+export var SelectedIcon = function SelectedIcon(_ref4) {
+  var $selected = _ref4.$selected;
+  return /*#__PURE__*/React.createElement(SelectedIconWrapper, null, /*#__PURE__*/React.createElement(StyledSelectedIcon, {
+    "aria-hidden": true,
+    color: "icon.base",
+    name: "circle-check",
+    $selected: $selected
+  }));
+};

package/lib/Card/utils.js

@@ -0,0 +1,46 @@
+import { createContext, useContext } from 'react';
+import { assertIsElement } from "../utils";
+export var SubComponentContext = /*#__PURE__*/createContext(
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function () {});
+export function useChildContext() {
+  var setHasSubComponent = useContext(SubComponentContext);
+  setHasSubComponent(true);
+}
+export var navigateTo = function navigateTo(_ref) {
+  var _ref$current, _window$open;
+  var e = _ref.e,
+    href = _ref.href,
+    ref = _ref.ref;
+  var target = e.target;
+
+  // asserts that target is an element so `contains` accepts it
+  assertIsElement(target);
+  if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) {
+    if (target.getAttribute('onclick') !== null || target.getAttribute('href') !== null) {
+      e.stopPropagation();
+      return;
+    }
+  }
+  (_window$open = window.open(href, '_blank')) === null || _window$open === void 0 ? void 0 : _window$open.focus();
+};
+export var onKeyDown = function onKeyDown(_ref2) {
+  var e = _ref2.e,
+    href = _ref2.href,
+    onClick = _ref2.onClick,
+    ref = _ref2.ref,
+    role = _ref2.role;
+  if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter') {
+    if (role === 'link') {
+      return navigateTo({
+        e: e,
+        href: href,
+        ref: ref
+      });
+    }
+    if (role === 'presentation') {
+      return;
+    }
+    return onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }
+};

package/lib/Checkbox/styles.js

@@ -47,13 +47,14 @@ export var CheckboxBox = styled.div.withConfig({
   return props.theme.easing.ease_in;
 });
 CheckboxBox.displayName = 'CheckboxBox';
-export var CheckIcon = styled(Icon).withConfig({
+export var CheckIcon = styled(Icon).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);
 });
 CheckIcon.displayName = 'CheckIcon';
 export var PillInput = styled.input.withConfig({

package/lib/DatePicker/common.js

@@ -11,7 +11,8 @@ export var CalendarNavButton = function CalendarNavButton(_ref) {
   var type = _ref.type;
   return /*#__PURE__*/React.createElement(Icon, {
     size: "mini",
-    name: iconNames[type]
+    name: iconNames[type],
+    "aria-hidden": true
   });
 };
 export var commonDatePickerProps = {

package/lib/Drawer/Drawer.js

@@ -1,5 +1,5 @@
 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 _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"];
@@ -46,12 +46,15 @@ var DrawerCloseButton = function DrawerCloseButton(props) {
     "aria-label": closeButtonLabel,
     onClick: onClose
   }, props), props.children || /*#__PURE__*/React.createElement(Icon, {
+    "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);
@@ -70,7 +73,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) {
@@ -129,7 +133,7 @@ var Drawer = function Drawer(_ref3) {
   }, [onClose, disableCloseOnClickOutside, closeTargets]);
   return /*#__PURE__*/React.createElement(FocusLock, {
     key: id,
-    autoFocus: false,
+    autoFocus: true,
     returnFocus: true
   }, /*#__PURE__*/React.createElement(AnimatedDrawer, _extends({
     ref: drawerRef,
@@ -137,7 +141,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/lib/Icon/Icon.js

@@ -1,17 +1,19 @@
-var _excluded = ["name", "size", "fixedWidth", "ariaLabel"],
+var _excluded = ["name", "size", "fixedWidth", "ariaLabel", "color", "svgProps"],
   _excluded2 = ["activeName", "inactiveName", "isActive", "size", "fixedWidth", "ariaLabel"];
 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 _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; }
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+import iconViewBoxes from "../IconViewBoxes";
 import Box from "../Box";
-// eslint-disable-next-line no-restricted-syntax
-import * as iconViewBoxes from "../IconViewBoxes";
-import Container from "./styles";
+import PartnerLogo, { PartnerNames } from "../PartnerLogo";
+import { includes } from "../utils";
+
 // TODO: get json file working in flow so this can be shared
 // import deprecatedIcons from './deprecatedIcons.json';
 import deprecatedIcons from "./deprecatedIcons";
+import Container from "./styles";
 var Icon = function Icon(_ref) {
   var name = _ref.name,
     _ref$size = _ref.size,
@@ -19,20 +21,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 (includes(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
+    // ariaLabel needs to be overridable by aria-label prop in ...rest
+    , _extends({
+      "aria-label": ariaLabel
+    }, rest, logoProps));
+  }
   var iconName = deprecatedIcons[name] || name;
   var iconViewBox = iconViewBoxes[iconName];
   return /*#__PURE__*/React.createElement(Container, _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)
   })));
@@ -66,14 +88,14 @@ 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
   }));
 };
@@ -81,6 +103,7 @@ 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.
  *
+ * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button
  * @example
  * const [toggleState, setToggleState] = useState(false);
  * <Button  // Wrap Icon.Toggle with Button

package/lib/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/lib/IllustrationViewBoxes.d.js

@@ -0,0 +1 @@
+export {};

package/lib/Indicator/Indicator.js

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

package/lib/Input/Input.js

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