@sproutsocial/racine 14.2.0 → 15.0.0

package/commonjs/Card/Card.js

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

package/commonjs/Card/CardTypes.flow.js

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

package/commonjs/Card/index.flow.js

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

package/commonjs/Card/styles.js

@@ -3,28 +3,108 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = exports.ClickableArea = void 0;
+exports.StyledSelectedIcon = exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardContent = exports.StyledCard = exports.SelectedIconWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _Box = _interopRequireDefault(require("../Box"));
-var _Button = _interopRequireDefault(require("../Button"));
+var _styledSystem = require("styled-system");
+var _mixins = require("../utils/mixins");
+var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var Container = (0, _styledComponents.default)(_Box.default).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;
+// 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
+
+var StyledCardContent = _styledComponents.default.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];
+}, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.space);
+exports.StyledCardContent = StyledCardContent;
+var StyledCardHeader = (0, _styledComponents.default)(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;
+}, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.space);
+exports.StyledCardHeader = StyledCardHeader;
+var StyledCardFooter = (0, _styledComponents.default)(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;
+}, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.space);
+exports.StyledCardFooter = StyledCardFooter;
+var SelectedIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "styles__SelectedIconWrapper",
+  componentId: "sc-9tyqu4-3"
+})(["display:flex;align-items:center;justify-content:center;position:absolute;top:-8px;right:-8px;"]);
+exports.SelectedIconWrapper = SelectedIconWrapper;
+var StyledSelectedIcon = (0, _styledComponents.default)(_Icon.default).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  ";
 });
-exports.Container = Container;
-var ClickableArea = (0, _styledComponents.default)(_Button.default).withConfig({
-  displayName: "styles__ClickableArea",
-  componentId: "sc-1t1hrf6-1"
-})(["position:absolute !important;top:0;bottom:0;left:0;right:0;width:100%;"]);
-exports.ClickableArea = ClickableArea;
+exports.StyledSelectedIcon = StyledSelectedIcon;
+var StyledCard = _styledComponents.default.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];
+}, _mixins.focusRing, function (_ref19) {
+  var $disabled = _ref19.$disabled;
+  return $disabled && "\n    ".concat(_mixins.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  ");
+}, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.position, _styledSystem.space);
+exports.StyledCard = StyledCard;

package/commonjs/Card/subComponents.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedIcon = exports.CardHeader = exports.CardFooter = exports.CardContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("./utils");
+var _styles = require("./styles");
+var _excluded = ["children"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+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.
+  (0, _utils.useChildContext)();
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardContent, rest, children);
+};
+exports.CardContent = CardContent;
+var CardHeader = function CardHeader(_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  (0, _utils.useChildContext)();
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardHeader, rest, children);
+};
+exports.CardHeader = CardHeader;
+var CardFooter = function CardFooter(_ref3) {
+  var children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  (0, _utils.useChildContext)();
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardFooter, rest, children);
+};
+exports.CardFooter = CardFooter;
+var SelectedIcon = function SelectedIcon(_ref4) {
+  var $selected = _ref4.$selected;
+  return /*#__PURE__*/_react.default.createElement(_styles.SelectedIconWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSelectedIcon, {
+    "aria-hidden": true,
+    color: "icon.base",
+    name: "circle-check",
+    $selected: $selected
+  }));
+};
+exports.SelectedIcon = SelectedIcon;

package/commonjs/Card/utils.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onKeyDown = exports.navigateTo = exports.SubComponentContext = void 0;
+exports.useChildContext = useChildContext;
+var _react = require("react");
+var _utils = require("../utils");
+var SubComponentContext = /*#__PURE__*/(0, _react.createContext)(
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function () {});
+exports.SubComponentContext = SubComponentContext;
+function useChildContext() {
+  var setHasSubComponent = (0, _react.useContext)(SubComponentContext);
+  setHasSubComponent(true);
+}
+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
+  (0, _utils.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();
+};
+exports.navigateTo = navigateTo;
+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);
+  }
+};
+exports.onKeyDown = onKeyDown;

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';

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,14 +95,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
   }));
 };
@@ -88,6 +110,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/commonjs/IconViewBoxes.js

@@ -176,6 +176,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/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/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;