@sproutsocial/racine 14.2.0 → 15.0.0

package/lib/Listbox/Listbox.js

@@ -91,7 +91,8 @@ export var ListboxButton = function ListboxButton(_ref2) {
     size: restProps.size
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "chevron-down",
-    fixedWidth: true
+    fixedWidth: true,
+    "aria-hidden": true
   })));
 };
 Listbox.Option = Listbox.Item = Menu.Item;

package/lib/Loader/styles.js

@@ -1,28 +1,33 @@
-import { rgba } from 'polished';
 import styled, { css, keyframes } from 'styled-components';
 import { visuallyHidden } from "../utils/mixins";
 import { COMMON } from "../utils/system-props";
 var getSize = function getSize(size) {
-  var spinnerSize = Math.ceil(size * 0.9);
-  var borderWidth = Math.ceil(size * 0.1);
-  return css(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, spinnerSize);
-};
-var getColor = function getColor(color) {
-  return css(["&:after{border-color:", " ", " ", " ", ";}"], rgba(color, 0.3), rgba(color, 0.3), rgba(color, 0.7), rgba(color, 0.7));
+  var spinnerSize = Math.round(size * 1);
+  var borderWidth = Math.round(size * 0.1);
+  return css(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;box-shadow:", ";}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, function (_ref) {
+    var theme = _ref.theme;
+    return "inset 0 0 0 2px ".concat(theme.colors.neutral[600]);
+  }, spinnerSize);
 };
 var spin = keyframes(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
-var delay = keyframes(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
+var delayAnimation = keyframes(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
 var Container = styled.div.attrs({
   className: 'Loader'
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1edimrk-0"
-})(["position:relative;margin:0 auto;overflow:hidden;&:after{position:absolute;top:50%;left:50%;border-style:solid;border-radius:50%;content:'';transition:opacity 250ms;animation:", ";}", " ", " ", ""], function (props) {
-  return props.delay ? css(["", " 2.25s infinite linear,", " 2s 1"], spin, delay) : css(["", " 2.25s infinite linear"], spin);
+})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;box-shadow:", ";animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (_ref2) {
+  var theme = _ref2.theme;
+  return "0 0 0 2px ".concat(theme.colors.neutral[600]);
 }, function (props) {
-  return props.small ? getSize(20) : getSize(40);
+  return props.delay ? css(["", " 2s 1;"], delayAnimation) : 'none';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return "".concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[600], " ").concat(theme.colors.neutral[600]);
 }, function (props) {
-  return props.dark ? getColor(props.theme.colors.neutral[400]) : getColor(props.theme.colors.neutral[0]);
+  return props.delay ? css(["", " 2.25s infinite linear,", " 2s 1"], spin, delayAnimation) : css(["", " 2.25s infinite linear"], spin);
+}, function (props) {
+  return props.small ? getSize(20) : getSize(40);
 }, COMMON);
 export var Text = styled.div.withConfig({
   displayName: "styles__Text",

package/lib/LogoViewBoxes.d.js

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

package/lib/PartnerLogo/PartnerLogo.js

@@ -1,4 +1,4 @@
-var _excluded = ["partnerName", "backgroundType", "logoType", "height", "width", "size", "color"];
+var _excluded = ["partnerName", "backgroundType", "logoType", "height", "width", "size", "aria-label", "svgProps"];
 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; }
@@ -10,16 +10,18 @@ import Container from "./styles";
 var PartnerLogo = function PartnerLogo(_ref) {
   var partnerName = _ref.partnerName,
     backgroundType = _ref.backgroundType,
-    logoType = _ref.logoType,
+    _ref$logoType = _ref.logoType,
+    logoType = _ref$logoType === void 0 ? 'symbol' : _ref$logoType,
     height = _ref.height,
     width = _ref.width,
     size = _ref.size,
-    color = _ref.color,
+    ariaLabel = _ref['aria-label'],
+    svgProps = _ref.svgProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = useTheme(),
     mode = _useTheme.mode;
   var whichLogo = function whichLogo(type) {
-    var logo = logoType ? partnerName + '-' + logoType : partnerName;
+    var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
     if (type && type === 'dark') {
       return "".concat(logo, "-dark");
     } else if (type && type === 'light') {
@@ -39,17 +41,16 @@ var PartnerLogo = function PartnerLogo(_ref) {
     height: height ? height : defaultHeight + 'px',
     width: width ? width : defaultWidth + 'px',
     logoSize: size,
-    className: "logo"
-    // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    ,
-    color: color
-  }, rest), /*#__PURE__*/React.createElement("svg", {
+    className: "logo",
+    role: "img",
+    "aria-label": ariaLabel,
+    "data-qa-logo": partnerName
+  }, rest), /*#__PURE__*/React.createElement("svg", _extends({
     className: "logo-svg",
     viewBox: logoViewBox,
-    focusable: false
-  }, /*#__PURE__*/React.createElement("use", {
+    focusable: false,
+    "data-qa-logo-svg": "".concat(partnerName, "-svg")
+  }, svgProps), /*#__PURE__*/React.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#sslogosvg-".concat(whichLogo(backgroundType))
   })));

package/lib/PartnerLogo/PartnerLogoTypes.js

@@ -1 +1,8 @@
-export {};
+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'];
+export var PartnerLogoSizes = {
+  mini: '12px',
+  small: '16px',
+  medium: '24px',
+  large: '32px',
+  jumbo: '64px'
+};

package/lib/PartnerLogo/index.js

@@ -1,5 +1,4 @@
 import PartnerLogo from "./PartnerLogo";
 export default PartnerLogo;
 export { PartnerLogo };
-export * from "./PartnerLogoTypes";
-export * from "./TypePartnerNames";
+export * from "./PartnerLogoTypes";

package/lib/PartnerLogo/styles.js

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

package/lib/Select/Select.js

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

package/lib/Switch/Switch.js

@@ -65,6 +65,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "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);

package/lib/TableHeaderCell/TableHeaderCell.js

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

package/lib/TableRowAccordion/TableRowAccordion.js

@@ -72,12 +72,16 @@ var TableRowAccordion = /*#__PURE__*/function (_React$Component) {
         }));
       }), /*#__PURE__*/React.createElement(TableCell, {
         id: "tableRowAccordion_trigger",
-        content: /*#__PURE__*/React.createElement(Trigger, {
+        content:
+        /*#__PURE__*/
+        // TODO: This trigger needs an accessible label passed in via props
+        React.createElement(Trigger, {
           "data-tablerowaccordion-trigger": true,
           onClick: this.handleToggle,
           role: "button"
         }, /*#__PURE__*/React.createElement(Icon, {
-          name: isExpanded ? 'chevron-up' : 'chevron-down'
+          name: isExpanded ? 'chevron-up' : 'chevron-down',
+          "aria-hidden": true
         }))
       })), /*#__PURE__*/React.createElement(Detail, {
         isExpanded: isExpanded,

package/lib/Toast/Toast.js

@@ -68,40 +68,46 @@ var Toast = function Toast(_ref) {
     theme = _ref.theme,
     color = _ref.color,
     icon = _ref.icon;
-  return /*#__PURE__*/React.createElement(Container, {
-    type: theme || 'info',
-    customColor: color,
-    borderLeft: "2px solid",
-    "data-qa-toast": ""
-  }, /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    minHeight: "48px",
-    maxHeight: "800px",
-    p: 350,
-    alignItems: "flex-start",
-    m: "auto",
-    width: 1
-  }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(CustomIcon, {
-    type: theme || 'info'
-    // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    ,
-    color: color,
-    customColor: color,
-    name: theme ? themeIcon[theme] : icon || themeIcon['info'],
-    fixedWidth: true
-  })), /*#__PURE__*/React.createElement(_StyledBox2, {
-    flex: 1
-  }, /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    color: "text.body",
-    "data-qa-toast-content": ""
-  }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(Icon, {
-    name: "x",
-    ml: 400,
-    color: "icon.base"
-  }))));
+  return (
+    /*#__PURE__*/
+    // TODO: if this closes when clicked, there should be a label saying "Click to close" that can be overriden
+    React.createElement(Container, {
+      type: theme || 'info',
+      customColor: color,
+      borderLeft: "2px solid",
+      "data-qa-toast": ""
+    }, /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      minHeight: "48px",
+      maxHeight: "800px",
+      p: 350,
+      alignItems: "flex-start",
+      m: "auto",
+      width: 1
+    }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(CustomIcon, {
+      type: theme || 'info'
+      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ,
+      color: color,
+      customColor: color,
+      name: theme ? themeIcon[theme] : icon || themeIcon['info'],
+      fixedWidth: true,
+      "aria-hidden": true
+    })), /*#__PURE__*/React.createElement(_StyledBox2, {
+      flex: 1
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      color: "text.body",
+      "data-qa-toast-content": ""
+    }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(Icon, {
+      name: "x",
+      ml: 400,
+      color: "icon.base",
+      "aria-hidden": true
+    }))))
+  );
 };
 export default ToastContainer;
 var _StyledBox = _styled(Box).withConfig({

package/lib/ToggleHint/ToggleHint.js

@@ -35,11 +35,13 @@ var ToggleHint = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getIcon", function () {
       if (_this.props.icon === 'chevron') {
         return /*#__PURE__*/React.createElement(Icon, {
-          name: "chevron-down"
+          name: "chevron-down",
+          "aria-hidden": true
         });
       }
       return /*#__PURE__*/React.createElement(Icon, {
-        name: _this.props.isOpen ? 'minus' : 'plus'
+        name: _this.props.isOpen ? 'minus' : 'plus',
+        "aria-hidden": true
       });
     });
     return _this;

package/lib/Token/Token.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { useTextContent } from "../utils/hooks";
 import Box from "../Box";
 import Icon from "../Icon";
+import { VisuallyHidden } from "../VisuallyHidden";
 import Container from "./styles";
 var Token = function Token(_ref) {
   var children = _ref.children,
@@ -37,11 +38,24 @@ var Token = function Token(_ref) {
     "data-qa-token-iscloseable": closeable === true,
     "data-qa-token-isvalid": valid === true,
     "data-qa-token-isdisabled": disabled === true
-  }, qa, rest), closeable ? /*#__PURE__*/React.createElement(Box, {
+  }, qa, rest), !valid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, {
+    as: "div",
+    role: "status"
+  }, "This is an invalid token"), /*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
+    pr: 300,
+    name: "error",
+    size: "mini"
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, "Invalid")), closeable ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement("span", null, children), " ", /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    display: "flex",
+    alignItems: "center"
+  }, children), /*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
     pl: 300,
     name: "x",
     size: "mini"

package/lib/Token/styles.js

@@ -5,7 +5,7 @@ import { useInteractiveColor } from "../utils/useInteractiveColor";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1mt4sof-0"
-})(["position:relative;display:inline-block;margin:0;line-height:1;vertical-align:middle;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
+})(["position:relative;display:inline-flex;align-items:center;margin:0;line-height:1;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
   var theme = _ref.theme;
   return css(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
 }, focusRing, function (_ref2) {

package/lib/TokenInput/TokenInput.js

@@ -192,7 +192,9 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(Box, {
         display: "flex",
         alignItems: "center"
-      }, iconName && /*#__PURE__*/React.createElement(Icon, {
+      },
+      // TODO: add the ability to take labels or aria props for accessibility
+      iconName && /*#__PURE__*/React.createElement(Icon, {
         name: iconName,
         size: "mini",
         pr: 300

package/lib/index.flow.js

@@ -1,6 +1,6 @@
 /* Asset types */
 /* Theme and related types */
-export * from "./systemProps";
+export * from "./systemProps/index.flow";
 export { default as theme } from "./themes/light/theme.flow";
 export { default as darkTheme } from "./themes/dark/theme.flow";
 export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme/index.flow";

package/lib/systemProps/index.flow.js

@@ -0,0 +1,14 @@
+export * from "./types.flow";
+export * from "./background.flow";
+export * from "./border.flow";
+export * from "./color.flow";
+export * from "./custom.flow";
+export * from "./flexbox.flow";
+export * from "./grid.flow";
+export * from "./layout.flow";
+export * from "./position.flow";
+export * from "./shadow.flow";
+export * from "./space.flow";
+export * from "./systemProps.flow";
+export * from "./typography.flow";
+export * from "./variant.flow";

package/lib/systemProps/index.js

@@ -17,48 +17,4 @@ export var variantSystemProps = compose(variant({
 export var systemProps = compose(customSystemProps, variantSystemProps, background, border, color, flexbox, grid, layout, position, shadow, space, typography);
 
 // including deprecated support for old type names in case they are needed for the intial TS release
-export {
-/**
-  @deprecated: Use BackgroundProps from styled-system instead.
-*/
-
-/**
-  @deprecated: Use background from styled-system instead.
-*/
-background as backgroundSystemProps,
-/**
-  @deprecated: Use border from styled-system instead.
-*/
-border as borderSystemProps,
-/**
-  @deprecated: Use color from styled-system instead.
-*/
-color as colorSystemProps,
-/**
-  @deprecated: Use flexbox from styled-system instead.
-*/
-flexbox as flexboxSystemProps,
-/**
-  @deprecated: Use grid from styled-system instead.
-*/
-grid as gridSystemProps,
-/**
-  @deprecated: Use layout from styled-system instead.
-*/
-layout as layoutSystemProps,
-/**
-  @deprecated: Use position from styled-system instead.
-*/
-position as positionSystemProps,
-/**
-  @deprecated: Use shadow from styled-system instead.
-*/
-shadow as shadowSystemProps,
-/**
-  @deprecated: Use space from styled-system instead.
-*/
-space as spaceSystemProps,
-/**
-  @deprecated: Use typography from styled-system instead.
-*/
-typography as typographySystemProps };
+export { background as backgroundSystemProps, border as borderSystemProps, color as colorSystemProps, flexbox as flexboxSystemProps, grid as gridSystemProps, layout as layoutSystemProps, position as positionSystemProps, shadow as shadowSystemProps, space as spaceSystemProps, typography as typographySystemProps };

package/lib/systemProps/systemProps.flow.js

@@ -0,0 +1,14 @@
+import { compose } from 'styled-system';
+import { backgroundSystemProps } from "./background.flow";
+import { borderSystemProps } from "./border.flow";
+import { colorSystemProps } from "./color.flow";
+import { customSystemProps } from "./custom.flow";
+import { flexboxSystemProps } from "./flexbox.flow";
+import { gridSystemProps } from "./grid.flow";
+import { layoutSystemProps } from "./layout.flow";
+import { positionSystemProps } from "./position.flow";
+import { shadowSystemProps } from "./shadow.flow";
+import { spaceSystemProps } from "./space.flow";
+import { typographySystemProps } from "./typography.flow";
+import { variantSystemProps } from "./variant.flow";
+export var systemProps = compose(customSystemProps, variantSystemProps, backgroundSystemProps, borderSystemProps, colorSystemProps, flexboxSystemProps, gridSystemProps, layoutSystemProps, positionSystemProps, shadowSystemProps, spaceSystemProps, typographySystemProps);

package/lib/themes/dark/theme.js

@@ -176,7 +176,7 @@ var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
     subtext: COLORS.COLOR_NEUTRAL_300,
     body: COLORS.COLOR_NEUTRAL_100,
     inverse: COLORS.COLOR_NEUTRAL_900,
-    error: COLORS.COLOR_RED_400,
+    error: red.foreground,
     background: {
       highlight: COLORS.COLOR_YELLOW_900,
       selection: COLORS.COLOR_BLUE_800

package/lib/themes/light/theme.js

@@ -177,7 +177,7 @@ var colors = _objectSpread(_objectSpread({
     subtext: COLORS.COLOR_NEUTRAL_700,
     body: COLORS.COLOR_NEUTRAL_800,
     inverse: COLORS.COLOR_NEUTRAL_0,
-    error: COLORS.COLOR_RED_800,
+    error: red.foreground,
     background: {
       highlight: COLORS.COLOR_YELLOW_200,
       selection: COLORS.COLOR_BLUE_300

package/lib/types/shared.flow.js

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

package/lib/utils/index.js

@@ -29,4 +29,25 @@ export var mergeRefs = function mergeRefs(refs) {
       _iterator.f();
     }
   };
-};
+};
+
+/**
+ * Type safe includes with narrowing
+ * https://fettblog.eu/typescript-array-includes/
+ */
+export function includes(coll, el) {
+  return coll.includes(el);
+}
+
+// https://stackoverflow.com/questions/71193818/react-onclick-argument-of-type-eventtarget-is-not-assignable-to-parameter-of-t
+export function assertIsNode(e) {
+  if (!e || !('nodeType' in e)) {
+    throw new Error("Node expected");
+  }
+}
+export function assertIsElement(e) {
+  assertIsNode(e);
+  if (e.nodeType !== 1) {
+    throw new Error("Element expected");
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "14.2.0",
+  "version": "15.0.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -33,8 +33,9 @@
     "build:typescript": "tsc --noEmit",
     "watch-app": "BABEL_ENV=es node ./bin/buildApp.js --watch",
     "start-package-only": "npm-run-all install-deps clean -p build-icons watch-package",
-    "start": "npm-run-all install-deps clean -p build-icons watch-package watch-app",
+    "start": "npm-run-all clean -p build-icons watch-package watch-app",
     "build": "npm-run-all -s clean build-icons build:typescript build:ts-declarations build-package build-app",
+    "build:sync-icons": "npm-run-all -s clean build-icons build:typescript build:ts-declarations build-package",
     "lint-js": "eslint --max-warnings=0 --fix .",
     "lint-css": "stylelint 'src/**/*.js'",
     "lint-icons": "yarn icon-lint check 'icons/*.svg'",
@@ -42,14 +43,14 @@
     "jest:watch": "jest --watch",
     "test:flow": "flow check --max-warnings 0",
     "test:ts": "tsc --noEmit",
-    "test:types": "yarn build-icons && yarn test:flow && yarn test:ts",
+    "test:types": "yarn test:flow && yarn test:ts",
     "test": "npm-run-all test:types lint-js lint-css lint-icons jest",
     "backstop-test": "yarn backstop test --config='backstop.config.js' --docker",
     "backstop-reference": "yarn backstop reference --config='backstop.config.js' --docker",
     "backstop-approve": "yarn backstop approve --config='backstop.config.js' --docker",
     "new": "node ./bin/scaffold.js",
     "playground": "node ./bin/scaffold-playground.js && yarn start",
-    "release": "yarn test && yarn changeset publish",
+    "release": "yarn build && yarn test && yarn changeset publish",
     "storybook": "rm -rf node_modules/.cache/storybook && start-storybook -c .storybook -p 9999",
     "build-storybook": "build-storybook --quiet -c .storybook -o .storybook-dist",
     "build-chromatic": "yarn build-icons && build-storybook --quiet -c .storybook -o .storybook-dist",
@@ -72,6 +73,7 @@
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
+    "flowgen": "^1.21.0",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "~1.0.2",
@@ -119,12 +121,12 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.0.0",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^27.0.0",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^17.0.38",
-    "@types/react": "^18.0.10",
+    "@types/node": "^16.15.0",
+    "@types/react": "^16.0.0",
     "@types/react-dates": "^21.8.3",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^16.0.0",
     "@types/react-modal": "^3.13.1",
     "@types/react-virtualized": "9.18.*",
     "@types/styled-components": "^5.1.26",
@@ -164,8 +166,8 @@
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^6.4.1",
     "is-glob": "^4.0.1",
-    "jest": "27.x.x",
-    "jest-axe": "6.0.0",
+    "jest": "^27.0.0",
+    "jest-axe": "^6.0.0",
     "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.13.0",
     "json-to-scss": "^1.6.2",
@@ -176,9 +178,9 @@
     "pify": "^4.0.1",
     "prettier": "^2.7.1",
     "prop-types": "^15.6.1",
-    "react": "16.12.0",
+    "react": "^16.12.0",
     "react-dates": "^21.8.0",
-    "react-dom": "16.12.0",
+    "react-dom": "^16.12.0",
     "rimraf": "^2.6.3",
     "storybook-dark-mode": "^1.0.9",
     "styled-components": "^5.2.3",
@@ -209,6 +211,8 @@
     "styled-components": "^5.2.3"
   },
   "resolutions": {
+    "@types/react": "^16.0.0",
+    "@types/react-dom": "^16.0.0",
     "lodash": "^4.17.21",
     "react-popper/create-react-context": "^0.3.0",
     "glob-parent": "^5.1.2",

package/__flow__/systemProps/index.js

@@ -1,16 +0,0 @@
-// @flow strict-local
-
-export * from "./types.flow.js";
-export * from "./background";
-export * from "./border";
-export * from "./color";
-export * from "./custom";
-export * from "./flexbox";
-export * from "./grid";
-export * from "./layout";
-export * from "./position";
-export * from "./shadow";
-export * from "./space";
-export * from "./systemProps";
-export * from "./typography";
-export * from "./variant";

package/dist/types/PartnerLogo/TypePartnerNames.d.ts

@@ -1,2 +0,0 @@
-export declare type TypePartnerNames = 'zendesk' | 'dropbox' | 'bigcommerce' | 'bitly' | 'canva' | 'twitter' | 'twitter-audience-network' | 'whatsapp' | 'yelp' | 'youtube' | 'shopify' | 'pinterest' | 'microsoft-dynamics' | 'marketo' | 'slack' | 'woocommerce' | 'tripadvisor' | 'tumblr' | 'google-business-messages' | 'reddit' | 'hubspot' | 'feedly' | 'facebook' | 'facebook-shops' | 'facebook-groups' | 'facebook-audience-network' | 'glassdoor' | 'salesforce' | 'instagram' | 'linkedin' | 'linkedin-audience-network' | 'google-analytics' | 'messenger' | 'google-my-business' | 'google-drive' | 'tiktok' | 'sproutsocial' | 'google-play-store' | 'apple-app-store';
-//# sourceMappingURL=TypePartnerNames.d.ts.map

package/dist/types/PartnerLogo/TypePartnerNames.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TypePartnerNames.d.ts","sourceRoot":"","sources":["../../../src/PartnerLogo/TypePartnerNames.ts"],"names":[],"mappings":"AAEA,oBAAY,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,aAAa,GACb,OAAO,GACP,OAAO,GACP,SAAS,GACT,0BAA0B,GAC1B,UAAU,GACV,MAAM,GACN,SAAS,GACT,SAAS,GACT,WAAW,GACX,oBAAoB,GACpB,SAAS,GACT,OAAO,GACP,aAAa,GACb,aAAa,GACb,QAAQ,GACR,0BAA0B,GAC1B,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,gBAAgB,GAChB,iBAAiB,GACjB,2BAA2B,GAC3B,WAAW,GACX,YAAY,GACZ,WAAW,GACX,UAAU,GACV,2BAA2B,GAC3B,kBAAkB,GAClB,WAAW,GACX,oBAAoB,GACpB,cAAc,GACd,QAAQ,GACR,cAAc,GACd,mBAAmB,GACnB,iBAAiB,CAAC"}