@sproutsocial/racine 15.1.0 → 17.0.0

package/commonjs/Switch/Switch.js

@@ -1,92 +1,58 @@
 "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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _VisuallyHidden = require("../VisuallyHidden");
-var _styles = _interopRequireDefault(require("./styles"));
-var _excluded = ["checked", "disabled", "name", "a11yLabels", "onClick", "qa"];
+var _styles = require("./styles");
+var _excluded = ["onClick", "loading", "checked", "disabled"];
 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); }
 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 _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); }
 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; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-// Switch acts as a toggle, enabling users to turn a particular action on or off.
-var Switch = /*#__PURE__*/function (_React$Component) {
-  _inherits(Switch, _React$Component);
-  var _super = _createSuper(Switch);
-  function Switch() {
-    var _this;
-    _classCallCheck(this, Switch);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      var _this$props = _this.props,
-        checked = _this$props.checked,
-        onClick = _this$props.onClick,
-        disabled = _this$props.disabled;
-      if (!disabled) {
-        onClick(e, !checked);
-      }
-    });
-    return _this;
-  }
-  _createClass(Switch, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        checked = _this$props2.checked,
-        disabled = _this$props2.disabled,
-        name = _this$props2.name,
-        a11yLabels = _this$props2.a11yLabels,
-        onClick = _this$props2.onClick,
-        _this$props2$qa = _this$props2.qa,
-        qa = _this$props2$qa === void 0 ? {} : _this$props2$qa,
-        rest = _objectWithoutProperties(_this$props2, _excluded);
-      return /*#__PURE__*/React.createElement(_styles.default, _extends({
-        role: "button",
-        type: "button",
-        "aria-pressed": checked,
-        disabled: disabled,
-        onClick: this.handleClick,
-        "data-qa-switch": name || '',
-        "data-qa-switch-ischecked": checked === true,
-        "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);
+/**
+ * @link https://seeds.sproutsocial.com/components/switch/
+ *
+ * Switch should always have an accessible label. Use aria-label, aria-labelledby or a `Label` component.
+ * The accessible label should not change when the checked state changes.
+ * The component uses role="switch" and the `checked` prop will be used to set the aria-checked attribute.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
+ *
+ * @example
+ * <Switch checked={true} onClick={_onClick} aria-label="Switch Example" />
+ */
+
+var Switch = function Switch(_ref) {
+  var onClick = _ref.onClick,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    checked = _ref.checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleClick = function handleClick(e) {
+    if (!disabled) {
+      onClick(e, !checked);
     }
-  }]);
-  return Switch;
-}(React.Component);
-exports.default = Switch;
-_defineProperty(Switch, "defaultProps", {
-  disabled: false,
-  a11yLabels: {
-    on: 'on',
-    off: 'off'
-  }
-});
+  };
+  return /*#__PURE__*/React.createElement(_styles.StyledSwitchButton, _extends({
+    type: "button",
+    role: "switch",
+    "aria-checked": checked,
+    disabled: disabled,
+    onClick: handleClick,
+    className: loading ? 'loading' : ''
+  }, rest), checked ? /*#__PURE__*/React.createElement(_Icon.default, {
+    "aria-hidden": true,
+    size: "mini",
+    name: "check"
+  }) : null);
+};
+var _default = Switch;
+exports.default = _default;

package/commonjs/Switch/index.flow.js

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

package/commonjs/Switch/styles.js

@@ -4,45 +4,69 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledSwitchButton = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _mixins = require("../utils/mixins");
-var _systemProps = require("../utils/system-props");
-var _styles = _interopRequireDefault(require("../Icon/styles"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styledSystem = require("styled-system");
 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; }
-var Container = _styledComponents.default.button.withConfig({
-  displayName: "styles__Container",
+var loadingKeyFrame = (0, _styledComponents.keyframes)(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
+var StyledSwitchButton = _styledComponents.default.button.withConfig({
+  displayName: "styles__StyledSwitchButton",
   componentId: "sc-ku462j-0"
-})(["position:relative;display:inline-block;width:36px;height:22px;margin:0;padding:", " ", ";vertical-align:middle;appearance:none;background-color:", ";border-radius:11px;outline:none;cursor:pointer;transition:background-color ", " ", ";border:1px solid ", ";white-space:nowrap;overflow:hidden;&::after{position:absolute;top:50%;left:0;width:14px;height:14px;background-color:", ";opacity:0.64;border-radius:50%;content:'';transition:transform ", " ", ";transform:translate(4px,-50%);}&:focus{", "}", " ", " ", ""], function (props) {
-  return props.theme.space[100];
-}, function (props) {
-  return props.theme.space[200];
-}, function (props) {
-  return props.theme.colors.form.background.base;
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
-}, function (props) {
-  return props.theme.colors.form.border.base;
-}, function (props) {
-  return props.theme.colors.icon.base;
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
-}, _mixins.focusRing, function (props) {
-  if (props.checked) {
-    return (0, _styledComponents.css)(["color:", ";text-align:left;border-color:", ";background-color:", ";&::after{background-color:", ";opacity:1;transform:translate(17px,-50%);}", "{position:absolute;top:50%;left:4px;transform:translate(0,-50%);color:", ";}"], props.theme.colors.text.body, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.theme.colors.icon.inverse, _styles.default, props.theme.colors.icon.inverse);
-  } else {
-    return "\n        &:hover,\n        &:focus {\n          border-color: ".concat(props.theme.colors.form.border.base, ";\n          background-color: ").concat(props.theme.colors.form.background.base, ";\n        }\n        &:hover {\n          &::after {\n            transform: translate(6px, -50%);\n          }\n        }\n      ");
-  }
-}, function (props) {
-  return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;&[aria-pressed='true']{&:hover,&:focus{background-color:", ";}}"], function (props) {
-    return props.theme.colors.container.background.selected;
-  });
-}, _systemProps.COMMON);
-var _default = Container;
-exports.default = _default;
+})(["position:relative;display:inline-flex;align-self:center;width:40px;height:24px;margin:0;padding:", " ", ";vertical-align:middle;appearance:none;background-color:", ";border-radius:16px;outline:none;cursor:pointer;transition:background-color ", " ", ";border:1px solid ", ";white-space:nowrap;overflow:hidden;&:focus{", "}&[aria-checked]{&::after{display:block;width:16px;height:16px;border-radius:50%;content:'';transition:transform ", " ", ";}&.loading{cursor:not-allowed;pointer-events:none;background-size:contain;background-color:", ";&::after{position:absolute;box-sizing:content-box;width:8px;height:8px;border-radius:", ";border:3px dotted ", ";background-color:transparent;animation:", " 2s linear infinite;}}}&[aria-checked='true']{color:", ";text-align:left;border-color:", ";background-color:", ";.Icon{position:absolute;top:50%;left:4px;transform:translate(0,-50%);color:", ";}&::after{background-color:", ";opacity:1;transform:translate(100%,6%);}&.loading::after{top:4px;right:5px;}&:hover,&:focus{&::after{transform:translate(90%,6%);}}}&[aria-checked='false']{&::after{background-color:", ";opacity:0.64;transform:translate(0%,6%);}&.loading::after{top:4px;left:5px;}&:hover,&:focus{&::after{transform:translate(10%,6%);}}}&:disabled{opacity:0.4;pointer-events:none;cursor:not-allowed;&[aria-checked='true']{&:hover,&:focus{background-color:", ";}}}", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  return theme.space[100];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.space[200];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.form.background.base;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.duration.fast;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.easing.ease_inout;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.colors.form.border.base;
+}, _mixins.focusRing, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.duration.fast;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.easing.ease_inout;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.colors.form.background.base;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.radii.pill;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colors.icon.base;
+}, loadingKeyFrame, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.colors.text.body;
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.colors.form.border.selected;
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.colors.form.background.selected;
+}, function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.colors.icon.inverse;
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.colors.icon.inverse;
+}, function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.colors.icon.base;
+}, function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.colors.container.background.selected;
+}, _styledSystem.color, _styledSystem.layout, _styledSystem.space);
+exports.StyledSwitchButton = StyledSwitchButton;

package/commonjs/Table/Table.js

@@ -58,11 +58,18 @@ var Table = function Table(_ref) {
     // @ts-ignore
     ,
     color: color
-  }), head.length > 0 && /*#__PURE__*/React.createElement("thead", {
+  }), /*#__PURE__*/React.createElement("colgroup", null, head.map(function (_ref2) {
+    var _ref2$colSpan = _ref2.colSpan,
+      colSpan = _ref2$colSpan === void 0 ? 1 : _ref2$colSpan;
+    return /*#__PURE__*/React.createElement("col", {
+      key: colSpan,
+      span: colSpan
+    });
+  })), head.length > 0 && /*#__PURE__*/React.createElement("thead", {
     "data-qa-table-header": ""
-  }, /*#__PURE__*/React.createElement("tr", null, head.map(function (_ref2) {
-    var color = _ref2.color,
-      th = _objectWithoutProperties(_ref2, _excluded2);
+  }, /*#__PURE__*/React.createElement("tr", null, head.map(function (_ref3) {
+    var color = _ref3.color,
+      th = _objectWithoutProperties(_ref3, _excluded2);
     return /*#__PURE__*/React.createElement(_TableHeaderCell.default, _extends({}, th, {
       key: th.id,
       onSort: onSort,
@@ -79,21 +86,21 @@ var Table = function Table(_ref) {
   }));
 };
 exports.Table = Table;
-var TableHead = function TableHead(_ref3) {
-  var children = _ref3.children,
-    props = _objectWithoutProperties(_ref3, _excluded3);
+var TableHead = function TableHead(_ref4) {
+  var children = _ref4.children,
+    props = _objectWithoutProperties(_ref4, _excluded3);
   return /*#__PURE__*/React.createElement("thead", props, children);
 };
 exports.TableHead = TableHead;
-var TableBody = function TableBody(_ref4) {
-  var children = _ref4.children,
-    props = _objectWithoutProperties(_ref4, _excluded4);
+var TableBody = function TableBody(_ref5) {
+  var children = _ref5.children,
+    props = _objectWithoutProperties(_ref5, _excluded4);
   return /*#__PURE__*/React.createElement("tbody", props, children);
 };
 exports.TableBody = TableBody;
-var TableRow = function TableRow(_ref5) {
-  var children = _ref5.children,
-    props = _objectWithoutProperties(_ref5, _excluded5);
+var TableRow = function TableRow(_ref6) {
+  var children = _ref6.children,
+    props = _objectWithoutProperties(_ref6, _excluded5);
   return /*#__PURE__*/React.createElement("tr", props, children);
 };
 exports.TableRow = TableRow;

package/commonjs/TableHeaderCell/TableHeaderCell.js

@@ -39,7 +39,7 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "getSortIcon", function (isSorted) {
+    _defineProperty(_assertThisInitialized(_this), "getSortIcon", function (isSorted, ariaSortDirection) {
       var sortDirection = _this.props.sortDirection;
       var iconName = 'chevron-up-down-filled';
       if (isSorted && sortDirection === _constants.SORT_DIRECTIONS.ASC) {
@@ -50,10 +50,11 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(_styles.SortIcon, null, /*#__PURE__*/React.createElement(_Icon.default, {
         size: "mini",
         name: iconName,
-        "aria-hidden": true
+        "aria-label": ariaSortDirection
       }));
     });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+      e.preventDefault();
       var _this$props = _this.props,
         onClick = _this$props.onClick,
         onSort = _this$props.onSort,
@@ -87,11 +88,19 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
         onClick = _this$props2.onClick,
         color = _this$props2.color,
         rest = _objectWithoutProperties(_this$props2, _excluded);
+      var isSorted = sortId === id;
+      var ariaSort = isSorted ? sortDirection === _constants.SORT_DIRECTIONS.ASC ? 'ascending' : 'descending' : undefined;
+      var buttonProps = isSortable ? {
+        role: 'button',
+        onClick: this.handleClick
+      } : {};
+      var scope = colSpan ? 'colgroup' : 'col';
       return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
         key: id,
         alignment: align || 'left',
         sortable: isSortable,
         colSpan: colSpan,
+        scope: scope,
         width: width,
         onClick: this.handleClick,
         "data-tableheadercell-sortable": isSortable,
@@ -101,8 +110,12 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         ,
-        color: color
-      }), children || content, isSortable && !children && this.getSortIcon(id === sortId));
+        color: color,
+        "aria-sort": ariaSort
+      }), isSortable ? /*#__PURE__*/React.createElement(_styles.UnstyledButton, buttonProps, /*#__PURE__*/React.createElement("div", {
+        "aria-live": "polite",
+        role: "status"
+      }, children || content, !children && this.getSortIcon(id === sortId, ariaSort))) : children || content);
     }
   }]);
   return TableHeaderCell;

package/commonjs/TableHeaderCell/styles.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SortIcon = void 0;
+exports.default = exports.UnstyledButton = exports.SortIcon = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _systemProps = require("../utils/system-props");
 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); }
@@ -30,5 +30,10 @@ var SortIcon = _styledComponents.default.span.withConfig({
   return props.theme.space[200];
 });
 exports.SortIcon = SortIcon;
+var UnstyledButton = _styledComponents.default.button.withConfig({
+  displayName: "styles__UnstyledButton",
+  componentId: "sc-fjeapu-2"
+})(["background:none;border:none;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;"]);
+exports.UnstyledButton = UnstyledButton;
 var _default = Container;
 exports.default = _default;

package/commonjs/Tabs/Tabs.js

@@ -87,7 +87,11 @@ var TabItemButton = /*#__PURE__*/function (_React$Component) {
         tabIndex: isSelected ? 0 : -1,
         fullWidth: fullWidth,
         "data-qa-tab-button": id,
-        "data-qa-tab-button-state": isSelected
+        "data-qa-tab-button-state": isSelected,
+        "aria-selected": isSelected,
+        role: "tab"
+        // TODO: Add a TabPanel subcomponent for use with tabs
+        // aria-controls={tabPanelId}
       }, rest), children));
     }
   }]);
@@ -186,7 +190,8 @@ var Tabs = /*#__PURE__*/function (_React$Component2) {
       return /*#__PURE__*/React.createElement(_styles.default, _extends({
         "data-qa-tabs": "",
         onKeyUp: this.keyHandler,
-        onSelect: onSelect
+        onSelect: onSelect,
+        role: "tablist"
       }, qa, rest), /*#__PURE__*/React.createElement(TabButtonContext.Provider, {
         value: {
           selectedId: this.getSelectedId(),

package/commonjs/iconNames.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = ["active-listener", "add-item", "add-keyword", "add-team-member", "add-variable", "address-card-outline", "address-card-solid", "adobe-experience-manager", "ads", "advocacy-outline", "advocacy", "android", "apple", "approval-indicator-outline", "approval-indicator", "archive", "arrow-down-line", "arrow-down", "arrow-left-line", "arrow-left", "arrow-right-line", "arrow-right", "arrow-up-line", "arrow-up", "arrows", "asset-library-outline", "asset-library", "assign", "atom", "audio", "back-to-top", "bambu-icon-outline", "bambu-icon", "barcode", "basketball", "bell-outline", "bigcommerce", "bitly", "bold", "book", "bookmark", "bot", "browser", "business", "calendar-outline", "calendar", "camera-outline", "camera-story", "camera", "campaign", "canva", "carousel", "cart-plus-outline", "cart-plus", "check", "chevron-down-filled", "chevron-down", "chevron-left", "chevron-right", "chevron-up-down-filled", "chevron-up-filled", "chevron-up", "circle-check-outline", "circle-check", "circle", "circle+", "circles", "circlex", "click-to-view", "clicks", "clipboard-outline", "clipboard", "clock", "closed-captioning", "cloud", "code", "columns", "comment-ai-outline", "comment-ai", "comment-alt-outline", "comment-alt", "comment-lines-alt-outline", "comment", "compact-density", "compact-indicator", "comparison", "competitor", "compose", "content-suggestions", "credit-card", "crop", "crown", "dashboard", "deconstructed-negative-sentiment", "deconstructed-neutral-sentiment", "deconstructed-positive-sentiment", "discovery", "dislike-outline", "dislike", "dm-link-outline", "dm-link", "dotdotdot", "download", "drafts-outline", "drafts", "dropbox", "duplicate-outline", "duplicate", "emoji-outline", "emoji", "empty-image", "engagement-per-post", "engagements", "error", "exchange-alt", "expanded-indicator", "export", "extended-circles", "external-link-alt", "external-link", "extreme-negative-sentiment", "eye-outline", "eye-slash-outline", "eye-slash", "eye", "facebook-audience-network", "facebook-branded-content-outline", "facebook-branded-content", "facebook-groups", "facebook", "fb-reactions-angry", "fb-reactions-haha", "fb-reactions-like", "fb-reactions-love", "fb-reactions-sad", "fb-reactions-wow", "feedly", "feeds", "female", "file-chart-line", "file-edit", "file-times-solid", "filter", "flag-outline", "flag", "flat-negative-sentiment-outline", "flat-negative-sentiment", "flat-neutral-sentiment-outline", "flat-neutral-sentiment", "flat-positive-sentiment-outline", "flat-positive-sentiment", "folder-open", "folder", "follow-outline", "follow", "follower-increase", "following", "font", "full-access", "gear", "gears", "github", "glassdoor", "glasses", "globe", "google-analytics-color", "google-business-messages", "google-drive", "google-my-business", "grip", "h1", "h2", "h3", "h4", "hamburger", "hand-sparkle-outline", "hand-sparkle", "hashtag", "headset", "heart-outline", "heart", "heartbeat", "help-alt", "help", "hiking", "history", "home", "hourglass", "hubspot", "image-caption", "image", "images", "impressions-per-post", "impressions", "inactive-listener", "inbox-action", "inbox-views", "inbox", "indicator", "industry", "info", "instagram", "internal-activity-outline", "internal-activity", "italic", "key", "keyboard", "laptop-phone", "large-density", "lift", "like-outline", "like", "link", "linkedin-audience-network", "linkedin", "list-ol", "listening", "lists", "location-outline", "location", "lock", "magic-wand", "male", "marketo", "mention", "message-preview-outline", "message-preview", "message", "messages-outline", "messages", "messenger", "metric-table", "microsoft-dynamics", "minus", "mobile", "monitor", "moon", "negative-sentiment", "neutral-positive-sentiment", "neutral-sentiment", "new-trend", "newspaper", "no-access", "notepad", "notifications-publishing-outline", "notifications-publishing", "notifications", "offline", "online", "paid-promotion-outline", "paid-promotion", "paid", "paint", "palette", "paperclip", "pause", "pencil-outline", "pencil", "person", "phone", "pinterest-boards-outline", "pinterest-boards", "pinterest", "play-circle", "play", "plug", "plus", "positive-sentiment", "power-up-outline", "power-up", "profile-connect", "profile-disconnect", "publishing-outline", "publishing", "puzzle-piece", "qr-code", "queue", "quotes-solid", "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"];
+exports.default = _default;

package/commonjs/illustrationNames.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = ["abacus", "analytics-offering", "asset-cards", "astronaut", "binoculars", "brand-keyword", "browser-doc", "business", "calendar-event", "calendar-reporting", "cat-error", "cat-no-access", "cat", "checkbox-alert", "coffee-cup", "competitors", "compose-window", "compose", "computer-error", "connect", "contact", "conversation", "custom-branding", "custom-post-variables", "customer-service", "dashboard", "exclamation-mark", "face-happy", "find-bookmark", "flask", "general-topic", "global-features", "global-trend", "grow-large", "grow", "hands-raised", "headset", "heartbeat-connection", "instagram-links", "invoice", "jewel", "keyword-tracking", "lightbulb-alt", "lightbulb", "like-conversation", "link-broken", "link-messages", "link-sections", "link-upload", "listening-pendo", "listening-sentiment", "listening-topic-templates", "listening-tour", "listening", "loading", "mailbox-empty", "mailbox-full", "megaphone", "message", "molecule", "network-data", "no-messages-found", "no-notifications", "note", "notification", "notifications-onboarding", "notifications", "organize-message", "outbox-queue", "outbox-reviews", "pdf", "planning", "podium", "pointer", "publish-assets", "publish-links", "publishing-notifications", "publishing", "puzzle-piece", "question-mark", "reporting-folder", "reporting", "review-location", "review", "robot-assembly", "robot-error", "robot-happy", "rocket", "schedule-date", "schedule-messages", "search-keywords", "search-success", "search-trends", "search", "security", "sentiment", "shopping-bag", "spark-line", "sprout-mobile-app", "stamp", "storefront", "success", "tag-message", "tag", "team-roles", "team", "telescope", "tha-mel", "thumbs-up", "toggle-switch", "toolset-strength", "tracking-time", "twitter-messages", "twitter-profiles", "under-construction", "unsubscribe", "upward-trend", "user-task", "user-team", "variable-table", "view-connections", "vip-list", "warning", "wifi", "workflow-steps"];
+exports.default = _default;

package/commonjs/index.flow.js

@@ -63,7 +63,6 @@ var _exportNames = {
   Skeleton: true,
   SpotIllustration: true,
   Stack: true,
-  Switch: true,
   Table: true,
   TableCell: true,
   TableHeaderCell: true,
@@ -356,12 +355,6 @@ Object.defineProperty(exports, "Stack", {
     return _index42.default;
   }
 });
-Object.defineProperty(exports, "Switch", {
-  enumerable: true,
-  get: function get() {
-    return _index43.default;
-  }
-});
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
@@ -582,7 +575,18 @@ var _index39 = _interopRequireDefault(require("./Select/index.flow"));
 var _index40 = _interopRequireDefault(require("./Skeleton/index.flow"));
 var _index41 = _interopRequireDefault(require("./SpotIllustration/index.flow"));
 var _index42 = _interopRequireDefault(require("./Stack/index.flow"));
-var _index43 = _interopRequireDefault(require("./Switch/index.flow"));
+var _index43 = require("./Switch/index.flow");
+Object.keys(_index43).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index43[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index43[key];
+    }
+  });
+});
 var _index44 = _interopRequireDefault(require("./Table/index.flow"));
 var _index45 = _interopRequireDefault(require("./TableCell/index.flow"));
 var _index46 = _interopRequireDefault(require("./TableHeaderCell/index.flow"));

package/commonjs/index.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  IconNames: true,
+  SpotIllustrationNames: true,
+  PartnerLogoNames: true,
   theme: true,
   darkTheme: true,
   sproutLightTheme: true,
@@ -24,6 +27,24 @@ Object.defineProperty(exports, "Alert", {
     return _Banner.Banner;
   }
 });
+Object.defineProperty(exports, "IconNames", {
+  enumerable: true,
+  get: function get() {
+    return _iconNames.default;
+  }
+});
+Object.defineProperty(exports, "PartnerLogoNames", {
+  enumerable: true,
+  get: function get() {
+    return _logoNames.default;
+  }
+});
+Object.defineProperty(exports, "SpotIllustrationNames", {
+  enumerable: true,
+  get: function get() {
+    return _illustrationNames.default;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function get() {
@@ -96,6 +117,9 @@ Object.defineProperty(exports, "visuallyHidden", {
     return _mixins.visuallyHidden;
   }
 });
+var _iconNames = _interopRequireDefault(require("./iconNames"));
+var _illustrationNames = _interopRequireDefault(require("./illustrationNames"));
+var _logoNames = _interopRequireDefault(require("./logoNames"));
 var _systemProps = require("./systemProps");
 Object.keys(_systemProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/commonjs/logoNames.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bynder", "canva", "dropbox", "facebook-audience-network", "facebook", "facebook-groups", "facebook-shops", "feedly", "github", "glassdoor", "google-analytics", "google-business-messages", "google-drive", "google-my-business", "google-play-store", "hubspot", "instagram", "linkedin-audience-network", "linkedin", "marketo", "messenger", "microsoft-dynamics", "pinterest", "reddit-alien", "reddit", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "tiktok", "tripadvisor", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "yelp", "youtube", "zendesk"];
+exports.default = _default;