@sproutsocial/racine 15.1.0 → 17.0.0

package/lib/DatePicker/SingleDatePicker/SingleDatePicker.js

@@ -1,27 +1,51 @@
-var _excluded = ["onDateChange", "date", "focused", "onFocusChange"];
+var _excluded = ["onDateChange", "setStatusText", "date", "focused", "onFocusChange", "initialVisibleMonth", "numberOfMonths"];
 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 React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
 import { ReactDatesCssOverrides } from "../styles";
-import { commonDatePickerProps } from "../common";
+import { commonDatePickerProps, DefaultSetStatusText, getVisibleMonths } from "../common";
+import { VisuallyHidden } from "../../VisuallyHidden";
+import moment from 'moment';
 var SingleDatePicker = function SingleDatePicker(_ref) {
   var onDateChange = _ref.onDateChange,
+    _ref$setStatusText = _ref.setStatusText,
+    setStatusText = _ref$setStatusText === void 0 ? DefaultSetStatusText : _ref$setStatusText,
     _ref$date = _ref.date,
     date = _ref$date === void 0 ? null : _ref$date,
     _ref$focused = _ref.focused,
     focused = _ref$focused === void 0 ? false : _ref$focused,
     _ref$onFocusChange = _ref.onFocusChange,
     onFocusChange = _ref$onFocusChange === void 0 ? function () {} : _ref$onFocusChange,
+    initialVisibleMonth = _ref.initialVisibleMonth,
+    _ref$numberOfMonths = _ref.numberOfMonths,
+    numberOfMonths = _ref$numberOfMonths === void 0 ? 1 : _ref$numberOfMonths,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ReactDatesCssOverrides, null), /*#__PURE__*/React.createElement(DayPickerSingleDateController, _extends({}, commonDatePickerProps, {
+  var _useState = useState(setStatusText(getVisibleMonths(moment((initialVisibleMonth === null || initialVisibleMonth === void 0 ? void 0 : initialVisibleMonth()) || date || undefined), numberOfMonths))),
+    _useState2 = _slicedToArray(_useState, 2),
+    statusText = _useState2[0],
+    updateStatusText = _useState2[1];
+  var handleMonthClick = function handleMonthClick(date) {
+    updateStatusText(setStatusText(getVisibleMonths(date, numberOfMonths)));
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ReactDatesCssOverrides, null), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("div", {
+    role: "status"
+  }, statusText)), /*#__PURE__*/React.createElement(DayPickerSingleDateController, _extends({}, commonDatePickerProps, {
     date: date,
-    numberOfMonths: 1,
+    numberOfMonths: numberOfMonths,
     onDateChange: onDateChange,
-    initialVisibleMonth: null,
+    initialVisibleMonth: initialVisibleMonth || null,
     focused: focused,
-    onFocusChange: onFocusChange
+    onFocusChange: onFocusChange,
+    onPrevMonthClick: handleMonthClick,
+    onNextMonthClick: handleMonthClick
   }, rest)));
 };
 export default /*#__PURE__*/React.memo(SingleDatePicker);

package/lib/DatePicker/common.js

@@ -43,4 +43,18 @@ export var formatDateAsCalendarDay = function formatDateAsCalendarDay(date) {
 export var getVisibleMonthWithReactDatesInternalApi = function getVisibleMonthWithReactDatesInternalApi(container) {
   var _container$querySelec, _container$querySelec2;
   return (_container$querySelec = (_container$querySelec2 = container.querySelector('[data-visible=true] strong')) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.textContent) !== null && _container$querySelec !== void 0 ? _container$querySelec : '';
+};
+
+// Receives a single Moment and returns an array of Moments, one for each currently visible month.
+export var getVisibleMonths = function getVisibleMonths(initialMonth, numberOfMonths) {
+  var months = [initialMonth];
+  for (var i = 1; i < numberOfMonths; i++) {
+    months.push(initialMonth.clone().add(i, 'month'));
+  }
+  return months;
+};
+
+// Default setStatusText prop for both SingleDatePicker and DateRangePicker
+export var DefaultSetStatusText = function DefaultSetStatusText(dates) {
+  return dates.map(formatDateAsCalendarHeader).join(', ');
 };

package/lib/Icon/Icon.js

@@ -7,8 +7,9 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import iconViewBoxes from "../IconViewBoxes";
 import Box from "../Box";
-import PartnerLogo, { PartnerNames } from "../PartnerLogo";
+import PartnerLogo from "../PartnerLogo";
 import { includes } from "../utils";
+import PartnerLogoNames from "../logoNames";
 
 // TODO: get json file working in flow so this can be shared
 // import deprecatedIcons from './deprecatedIcons.json';
@@ -24,7 +25,7 @@ var Icon = function Icon(_ref) {
     color = _ref.color,
     svgProps = _ref.svgProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  if (includes(PartnerNames, name)) {
+  if (includes(PartnerLogoNames, name)) {
     // Icon's "default" size is equivalent to PartnerLogo's "small" size
     var logoSize = size === 'default' ? 'small' : size;
     var logoProps = {

package/lib/IconViewBoxes.js

@@ -276,6 +276,7 @@ module.exports = {
   "puzzle-piece": "0 0 18 16",
   "qr-code": "0 0 16 16",
   "queue": "0 0 16 16",
+  "quotes-solid": "0 0 18 18",
   "recommendation": "0 0 16 16",
   "reddit-alien": "0 0 16 16",
   "reddit": "0 0 16 16",

package/lib/IllustrationViewBoxes.js

@@ -22,6 +22,7 @@ module.exports = {
   "contact": "0 0 305 145",
   "conversation": "0 0 330 236",
   "custom-branding": "0 0 168 164",
+  "custom-post-variables": "0 0 87 57",
   "customer-service": "0 0 302 155",
   "dashboard": "0 0 337 195",
   "exclamation-mark": "0 0 219 143",

package/lib/LogoViewBoxes.js

@@ -1,8 +1,12 @@
 module.exports = {
   "adobe-experience-manager-dark": "0 0 16 17",
   "adobe-experience-manager": "0 0 16 17",
+  "android-dark": "0 0 18 18",
+  "android": "0 0 18 18",
   "apple-app-store-dark": "0 0 140 140",
   "apple-app-store": "0 0 140 140",
+  "apple-dark": "0 0 18 18",
+  "apple": "0 0 18 18",
   "bigcommerce-dark": "0 0 140 140",
   "bigcommerce-lockup-dark": "0 0 291 66",
   "bigcommerce-lockup": "0 0 291 66",
@@ -29,6 +33,8 @@ module.exports = {
   "facebook": "0 0 141 139",
   "feedly-dark": "0 0 141 123",
   "feedly": "0 0 141 123",
+  "github-dark": "0 0 18 18",
+  "github": "0 0 18 18",
   "glassdoor-dark": "0 0 140 196",
   "glassdoor": "0 0 140 196",
   "google-analytics-dark": "0 0 140 160",
@@ -57,8 +63,12 @@ module.exports = {
   "microsoft-dynamics": "0 0 140 227",
   "pinterest-dark": "0 0 140 141",
   "pinterest": "0 0 140 141",
+  "reddit-alien-dark": "0 0 18 18",
+  "reddit-alien": "0 0 18 18",
   "reddit-dark": "0 0 140 140",
   "reddit": "0 0 140 140",
+  "salesforce-cloud-dark": "0 0 20 18",
+  "salesforce-cloud": "0 0 20 18",
   "salesforce-dark": "0 0 140 99",
   "salesforce": "0 0 140 99",
   "shopify-dark": "0 0 140 159",
@@ -71,6 +81,10 @@ module.exports = {
   "sproutsocial-wordmark-dark": "0 0 320 52",
   "sproutsocial-wordmark": "0 0 320 52",
   "sproutsocial": "0 0 140 174",
+  "tableau-dark": "0 0 18 18",
+  "tableau-lockup-dark": "0 0 291 56",
+  "tableau-lockup": "0 0 291 56",
+  "tableau": "0 0 18 18",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/lib/PartnerLogo/PartnerLogo.js

@@ -4,35 +4,42 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { useTheme } from 'styled-components';
-// eslint-disable-next-line no-restricted-syntax
-import * as logoViewBoxes from "../LogoViewBoxes";
+import logoViewBoxes from "../LogoViewBoxes";
 import Container from "./styles";
-var PartnerLogo = function PartnerLogo(_ref) {
-  var partnerName = _ref.partnerName,
-    backgroundType = _ref.backgroundType,
-    _ref$logoType = _ref.logoType,
-    logoType = _ref$logoType === void 0 ? 'symbol' : _ref$logoType,
-    height = _ref.height,
-    width = _ref.width,
-    size = _ref.size,
-    ariaLabel = _ref['aria-label'],
-    svgProps = _ref.svgProps,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var whichLogo = function whichLogo(_ref, mode) {
+  var backgroundType = _ref.backgroundType,
+    logoType = _ref.logoType,
+    partnerName = _ref.partnerName;
+  var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
+  if (backgroundType && backgroundType === 'dark') {
+    return "".concat(logo, "-dark");
+  } else if (backgroundType && backgroundType === 'light') {
+    return logo;
+  } else if (mode === 'dark') {
+    return "".concat(logo, "-dark");
+  } else {
+    return logo;
+  }
+};
+var PartnerLogo = function PartnerLogo(_ref2) {
+  var partnerName = _ref2.partnerName,
+    backgroundType = _ref2.backgroundType,
+    _ref2$logoType = _ref2.logoType,
+    logoType = _ref2$logoType === void 0 ? 'symbol' : _ref2$logoType,
+    height = _ref2.height,
+    width = _ref2.width,
+    size = _ref2.size,
+    ariaLabel = _ref2['aria-label'],
+    svgProps = _ref2.svgProps,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useTheme = useTheme(),
     mode = _useTheme.mode;
-  var whichLogo = function whichLogo(type) {
-    var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
-    if (type && type === 'dark') {
-      return "".concat(logo, "-dark");
-    } else if (type && type === 'light') {
-      return logo;
-    } else if (mode === 'dark') {
-      return "".concat(logo, "-dark");
-    } else {
-      return logo;
-    }
-  };
-  var logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
+  var logo = whichLogo({
+    backgroundType: backgroundType,
+    logoType: logoType,
+    partnerName: partnerName
+  }, mode);
+  var logoViewBox = logoViewBoxes[logo];
   var viewBoxCoordinates = (logoViewBox === null || logoViewBox === void 0 ? void 0 : logoViewBox.split(' ')) || [];
   var defaultWidth = viewBoxCoordinates[2];
   var defaultHeight = viewBoxCoordinates[3];
@@ -52,7 +59,7 @@ var PartnerLogo = function PartnerLogo(_ref) {
     "data-qa-logo-svg": "".concat(partnerName, "-svg")
   }, svgProps), /*#__PURE__*/React.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    xlinkHref: "#sslogosvg-".concat(whichLogo(backgroundType))
+    xlinkHref: "#sslogosvg-".concat(logo)
   })));
 };
 export default PartnerLogo;

package/lib/PartnerLogo/PartnerLogoTypes.js

@@ -1,8 +1,19 @@
-export var PartnerNames = ['apple-app-store', 'bigcommerce', 'bitly', 'bynder', 'canva', 'dropbox', 'facebook', 'facebook-audience-network', 'facebook-groups', 'facebook-shops', 'feedly', 'glassdoor', 'google-analytics', 'google-business-messages', 'google-drive', 'google-my-business', 'google-play-store', 'hubspot', 'instagram', 'linkedin', 'linkedin-audience-network', 'marketo', 'messenger', 'microsoft-dynamics', 'pinterest', 'reddit', 'salesforce', 'shopify', 'slack', 'sproutsocial', 'tiktok', 'tripadvisor', 'tumblr', 'twitter', 'twitter-audience-network', 'whatsapp', 'woocommerce', 'yelp', 'youtube', 'zendesk'];
+import PartnerLogoNames from "../logoNames";
+
+/**
+ * @deprecated Use PartnerLogoNames instead
+ */
+export var PartnerNames = PartnerLogoNames;
+
+/**
+ * @deprecated Use EnumLogoNames instead
+ */
+
 export var PartnerLogoSizes = {
   mini: '12px',
   small: '16px',
   medium: '24px',
   large: '32px',
   jumbo: '64px'
-};
+};
+export var PartnerLogoTypes = ['symbol', 'wordmark', 'lockup'];

package/lib/PartnerLogo/index.flow.js

@@ -1,2 +1 @@
-export * from "./PartnerLogo.flow";
-export * from "./TypePartnerNames.flow";
+export * from "./PartnerLogo.flow";

package/lib/Popout/Popout.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 = ["isOpen", "setIsOpen", "content", "children", "placement", "fullWidth", "zIndex", "focusOnContent", "onOpen", "onClose", "qa", "popperProps", "scheduleUpdateRef", "appendToBody", "focusLockProps", "color"],
+var _excluded = ["isOpen", "setIsOpen", "content", "children", "placement", "fullWidth", "zIndex", "focusOnContent", "onOpen", "onClose", "qa", "popperProps", "scheduleUpdateRef", "appendToBody", "focusLockProps", "color", "aria-haspopup"],
   _excluded2 = ["autoFocus", "returnFocus"],
   _excluded3 = ["children"];
 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); }
@@ -86,6 +86,7 @@ export function Popout(_ref) {
     _ref$focusLockProps = _ref.focusLockProps,
     focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
     color = _ref.color,
+    ariaHasPopup = _ref['aria-haspopup'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
   var _useState = useState(false),
@@ -184,9 +185,9 @@ export function Popout(_ref) {
   var ariaProps = useMemo(function () {
     return {
       'aria-expanded': isShown,
-      'aria-haspopup': true
+      'aria-haspopup': ariaHasPopup ? ariaHasPopup : true
     };
-  }, [isShown]);
+  }, [isShown, ariaHasPopup]);
 
   // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
   // to wait for the targetRef to receive a value before rendering the popout. Otherwise,

package/lib/SpotIllustration/illustrationNames.js

@@ -1 +1 @@
-export var illustrationNames = Object.freeze(["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", "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"]);
+export var illustrationNames = Object.freeze(["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"]);

package/lib/Switch/Switch.js

@@ -1,83 +1,47 @@
-var _excluded = ["checked", "disabled", "name", "a11yLabels", "onClick", "qa"];
-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 = ["onClick", "loading", "checked", "disabled"];
 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); }
 import * as React from 'react';
 import Icon from "../Icon";
-import { VisuallyHidden } from "../VisuallyHidden";
-import Container from "./styles";
-// 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];
+import { StyledSwitchButton } from "./styles";
+/**
+ * @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);
     }
-    _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(Container, _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, null, checked ? a11yLabels.on : a11yLabels.off), checked ? /*#__PURE__*/React.createElement(Icon, {
-        "aria-hidden": true,
-        size: "mini",
-        name: "check"
-      }) : null);
-    }
-  }]);
-  return Switch;
-}(React.Component);
-_defineProperty(Switch, "defaultProps", {
-  disabled: false,
-  a11yLabels: {
-    on: 'on',
-    off: 'off'
-  }
-});
-export { Switch as default };
+  };
+  return /*#__PURE__*/React.createElement(StyledSwitchButton, _extends({
+    type: "button",
+    role: "switch",
+    "aria-checked": checked,
+    disabled: disabled,
+    onClick: handleClick,
+    className: loading ? 'loading' : ''
+  }, rest), checked ? /*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
+    size: "mini",
+    name: "check"
+  }) : null);
+};
+export default Switch;

package/lib/Switch/index.flow.js

@@ -1 +1,2 @@
-export * from "./Switch.flow";
+export * from "./Switch.flow";
+export * from "./SwitchTypes.flow";

package/lib/Switch/styles.js

@@ -1,37 +1,62 @@
-import styled, { css } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { focusRing } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
-import Icon from "../Icon/styles";
-var Container = styled.button.withConfig({
-  displayName: "styles__Container",
+import { color, layout, space } from 'styled-system';
+var loadingKeyFrame = keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
+export var StyledSwitchButton = styled.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;
-}, focusRing, function (props) {
-  if (props.checked) {
-    return 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, Icon, 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 && css(["opacity:0.4;cursor:not-allowed;&[aria-pressed='true']{&:hover,&:focus{background-color:", ";}}"], function (props) {
-    return props.theme.colors.container.background.selected;
-  });
-}, COMMON);
-export default Container;
+})(["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;
+}, 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;
+}, color, layout, space);

package/lib/Table/Table.js

@@ -48,11 +48,18 @@ export 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, _extends({}, th, {
       key: th.id,
       onSort: onSort,
@@ -68,19 +75,19 @@ export var Table = function Table(_ref) {
     return rowRender ? rowRender(row) : renderTableRow(row);
   }));
 };
-export var TableHead = function TableHead(_ref3) {
-  var children = _ref3.children,
-    props = _objectWithoutProperties(_ref3, _excluded3);
+export var TableHead = function TableHead(_ref4) {
+  var children = _ref4.children,
+    props = _objectWithoutProperties(_ref4, _excluded3);
   return /*#__PURE__*/React.createElement("thead", props, children);
 };
-export var TableBody = function TableBody(_ref4) {
-  var children = _ref4.children,
-    props = _objectWithoutProperties(_ref4, _excluded4);
+export var TableBody = function TableBody(_ref5) {
+  var children = _ref5.children,
+    props = _objectWithoutProperties(_ref5, _excluded4);
   return /*#__PURE__*/React.createElement("tbody", props, children);
 };
-export var TableRow = function TableRow(_ref5) {
-  var children = _ref5.children,
-    props = _objectWithoutProperties(_ref5, _excluded5);
+export var TableRow = function TableRow(_ref6) {
+  var children = _ref6.children,
+    props = _objectWithoutProperties(_ref6, _excluded5);
   return /*#__PURE__*/React.createElement("tr", props, children);
 };
 TableHead.displayName = 'Table.TableHead';