@sproutsocial/racine 12.24.0 → 13.0.2

package/lib/ToggleHint/index.js

@@ -53,12 +53,15 @@ var ToggleHint = /*#__PURE__*/function (_React$Component) {
         qa = _this$props.qa,
         className = _this$props.className,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(Container, _extends({
-        icon: icon,
-        isOpen: isOpen,
-        "data-qa-togglehint-isopen": isOpen
+      return (
+        /*#__PURE__*/
         // $FlowIssue - upgrade v0.112.0
-      }, qa, rest), this.getIcon(), /*#__PURE__*/React.createElement(IconText, null, isOpen ? closeString : openString));
+        React.createElement(Container, _extends({
+          icon: icon,
+          isOpen: isOpen,
+          "data-qa-togglehint-isopen": isOpen
+        }, qa, rest), this.getIcon(), /*#__PURE__*/React.createElement(IconText, null, isOpen ? closeString : openString))
+      );
     }
   }]);
   return ToggleHint;

package/lib/ToggleHint/styles.js

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { visuallyHidden } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
 var Container = styled.div.attrs({
   className: 'ToggleHint'
 }).withConfig({

package/lib/Token/index.flow.js

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

package/lib/Token/index.js

@@ -4,9 +4,9 @@ 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 * as React from 'react';
 import { useTextContent } from "../utils/hooks";
-import Container from "./styles";
-import Icon from "../Icon";
 import Box from "../Box";
+import Icon from "../Icon";
+import Container from "./styles";
 var Token = function Token(_ref) {
   var children = _ref.children,
     _ref$closeable = _ref.closeable,
@@ -21,27 +21,31 @@ var Token = function Token(_ref) {
     palette = _ref$palette === void 0 ? 'neutral' : _ref$palette,
     rest = _objectWithoutProperties(_ref, _excluded);
   var textContainer = useTextContent('');
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    ref: textContainer,
-    valid: valid,
-    palette: palette,
-    type: closeable || onClick ? 'button' : undefined,
-    as: closeable || onClick ? 'button' : 'div',
-    closeable: closeable || onClick,
-    disabled: disabled,
-    onClick: onClick,
-    "data-qa-token": textContainer.current,
-    "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, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement("span", null, children), " ", /*#__PURE__*/React.createElement(Icon, {
-    pl: 300,
-    name: "x",
-    size: "mini"
-  })) : children);
+  return (
+    /*#__PURE__*/
+    // $FlowIssue - upgrade v0.112.0
+    React.createElement(Container, _extends({
+      ref: textContainer,
+      valid: valid,
+      palette: palette,
+      type: closeable || onClick ? 'button' : undefined,
+      as: closeable || onClick ? 'button' : 'div',
+      closeable: closeable || onClick,
+      disabled: disabled,
+      onClick: onClick,
+      "data-qa-token": textContainer.current,
+      "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, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement("span", null, children), " ", /*#__PURE__*/React.createElement(Icon, {
+      pl: 300,
+      name: "x",
+      size: "mini"
+    })) : children)
+  );
 };
 export default Token;

package/lib/Token/styles.js

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
 import { useInteractiveColor } from "../utils/useInteractiveColor";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",

package/lib/TokenInput/index.flow.js

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

package/lib/TokenInput/index.js

@@ -14,14 +14,13 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import * as React from 'react';
-import Container from "./styles";
-import { asTokenSpec, delimitersAsRegExp } from "./util";
 import { Accessory } from "../Input/styles";
 import Box from "../Box";
 import Icon from "../Icon";
 import Token from "../Token";
+import Container from "./styles";
+import { asTokenSpec, delimitersAsRegExp } from "./util";
 var DefaultDelimiters = [',', 'Enter'];
 var ControlledPropNames = ['value', 'hasFocus', 'activeToken'];
 var TokenInput = /*#__PURE__*/function (_React$Component) {
@@ -243,43 +242,46 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
         tokens = _this$props6.tokens,
         rest = _objectWithoutProperties(_this$props6, _excluded);
       var state = this.state;
-      return /*#__PURE__*/React.createElement(Container, _extends({
-        hasBeforeElement: !!elemBefore,
-        hasAfterElement: !!elemAfter,
-        disabled: disabled,
-        invalid: !!isInvalid,
-        warning: hasWarning,
-        focused: state.hasFocus
+      return (
+        /*#__PURE__*/
         // $FlowIssue - upgrade v0.112.0
-      }, rest), elemBefore && /*#__PURE__*/React.createElement(Accessory, {
-        before: true
-      }, elemBefore), tokens && this.renderTokens(tokens), /*#__PURE__*/React.createElement("input", _extends({
-        "aria-describedby": ariaDescribedby,
-        "aria-invalid": !!isInvalid,
-        "aria-label": ariaLabel,
-        autoFocus: autoFocus,
-        autoComplete: autocomplete,
-        disabled: disabled,
-        id: id,
-        name: name,
-        placeholder: placeholder,
-        type: "text",
-        required: required,
-        value: state.value,
-        maxLength: maxLength,
-        onBlur: this.handleBlur,
-        onChange: this.handleChangeText,
-        onFocus: this.handleFocus,
-        onKeyDown: this.handleKeyDown,
-        onKeyUp: this.handleKeyUp,
-        onPaste: this.handlePaste,
-        ref: innerRef,
-        "data-qa-input": name || '',
-        "data-qa-input-isdisabled": !!disabled,
-        "data-qa-input-isrequired": !!required
-      }, qa, inputProps)), elemAfter && /*#__PURE__*/React.createElement(Accessory, {
-        after: true
-      }, elemAfter));
+        React.createElement(Container, _extends({
+          hasBeforeElement: !!elemBefore,
+          hasAfterElement: !!elemAfter,
+          disabled: disabled,
+          invalid: !!isInvalid,
+          warning: hasWarning,
+          focused: state.hasFocus
+        }, rest), elemBefore && /*#__PURE__*/React.createElement(Accessory, {
+          before: true
+        }, elemBefore), tokens && this.renderTokens(tokens), /*#__PURE__*/React.createElement("input", _extends({
+          "aria-describedby": ariaDescribedby,
+          "aria-invalid": !!isInvalid,
+          "aria-label": ariaLabel,
+          autoFocus: autoFocus,
+          autoComplete: autocomplete,
+          disabled: disabled,
+          id: id,
+          name: name,
+          placeholder: placeholder,
+          type: "text",
+          required: required,
+          value: state.value,
+          maxLength: maxLength,
+          onBlur: this.handleBlur,
+          onChange: this.handleChangeText,
+          onFocus: this.handleFocus,
+          onKeyDown: this.handleKeyDown,
+          onKeyUp: this.handleKeyUp,
+          onPaste: this.handlePaste,
+          ref: innerRef,
+          "data-qa-input": name || '',
+          "data-qa-input-isdisabled": !!disabled,
+          "data-qa-input-isrequired": !!required
+        }, qa, inputProps)), elemAfter && /*#__PURE__*/React.createElement(Accessory, {
+          after: true
+        }, elemAfter))
+      );
     }
   }], [{
     key: "getDerivedStateFromProps",

package/lib/TokenInput/styles.js

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-19um4n4-0"

package/lib/Tooltip/index.flow.js

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

package/lib/Tooltip/index.js

@@ -15,9 +15,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 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); }
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import { TooltipContent } from "./styles";
-import Popout from "../Popout";
 import MOTION from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
+import Popout from "../Popout";
+import { TooltipContent } from "./styles";
 var idCounter = 0;
 var wrapContent = function wrapContent(content, show, hide, Wrapper, appearance, ariaProps, wrapperStyles) {
   return /*#__PURE__*/React.createElement(Wrapper, _extends({
@@ -82,7 +82,8 @@ var Tooltip = function Tooltip(_ref) {
   }, [isOpen, shouldShow, enterDelay, exitDelay]);
   var wrappedContent = wrapContent(
   // $FlowIssue - https://github.com/facebook/flow/issues/6392
-  content, shouldTooltipContentsBeInteractive ? show : undefined, shouldTooltipContentsBeInteractive ? hide : undefined, Content, defaultAppearance, _objectSpread({
+  content, shouldTooltipContentsBeInteractive ? show : undefined, shouldTooltipContentsBeInteractive ? hide : undefined, Content, defaultAppearance, // $FlowIssue
+  _objectSpread({
     id: id
   }, rest), {});
   var ariaPropsForWrappedChildren = isOpen ? {
@@ -113,18 +114,21 @@ var Content = function Content(_ref2) {
     appearance = _ref2$appearance === void 0 ? 'pill' : _ref2$appearance,
     children = _ref2.children,
     rest = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(TooltipContent, _extends({
-    appearance: appearance,
-    borderRadius: appearance === 'box' ? 500 : '5000em',
-    px: 400,
-    py: appearance === 'box' ? 400 : 200,
-    m: 200,
-    color: "text.body",
-    bg: "container.background.base",
-    boxShadow: "medium",
-    border: 500,
-    borderColor: "container.border.base"
+  return (
+    /*#__PURE__*/
     // $FlowIssue - upgrade v0.112.0
-  }, rest), children);
+    React.createElement(TooltipContent, _extends({
+      appearance: appearance,
+      borderRadius: appearance === 'box' ? 500 : '5000em',
+      px: 400,
+      py: appearance === 'box' ? 400 : 200,
+      m: 200,
+      color: "text.body",
+      bg: "container.background.base",
+      boxShadow: "medium",
+      border: 500,
+      borderColor: "container.border.base"
+    }, rest), children)
+  );
 };
 export default Tooltip;

package/lib/VisuallyHidden/index.js

@@ -1,6 +1,6 @@
 
-import { visuallyHidden } from "../utils/mixins";
 import styled from 'styled-components';
+import { visuallyHidden } from "../utils/mixins";
 export var VisuallyHidden = styled.span.withConfig({
   displayName: "VisuallyHidden",
   componentId: "sc-rxkbyc-0"

package/lib/dataviz/index.js

@@ -1,7 +1,7 @@
 
 import React from 'react';
-import Box from "../Box";
 import { withTheme } from 'styled-components';
+import Box from "../Box";
 export var DataVizRotation = withTheme(function (p) {
   return p.theme.colors.DATAVIZ_COLORS_LIST.map(function (color, i) {
     return /*#__PURE__*/React.createElement(Box, {

package/lib/index.js

@@ -1,67 +1,94 @@
 
 
+/* Asset types */
+
+/* Theme and related types */
 export * from "./systemProps";
-export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
-export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { useInteractiveColor } from "./utils/useInteractiveColor";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
 export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
-export { default as Icon } from "./Icon";
-// DEPRECATED: Alert has been renamed to Banner
-export { default as Alert } from "./Banner";
-export { default as Banner } from "./Banner";
+export { default as ThemeProvider } from "./ThemeProvider";
+
+/* Utilities and related types */
+export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
+export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
+export { useInteractiveColor } from "./utils/useInteractiveColor";
+
+/* Components */
+export { default as Avatar } from "./Avatar";
 export { default as Badge } from "./Badge";
-export { default as Indicator } from "./Indicator";
+export { default as Banner } from "./Banner";
+export { default as Box } from "./Box";
+export { default as Breadcrumb } from "./Breadcrumb";
+export { default as Button } from "./Button";
 export { default as Card } from "./Card";
 export { default as CharacterCounter } from "./CharacterCounter";
+export { default as ChartLegend } from "./ChartLegend";
 export { default as Checkbox } from "./Checkbox";
-export { default as Radio } from "./Radio";
-export { default as Textarea } from "./Textarea";
-export { default as ToggleHint } from "./ToggleHint";
-export { default as Loader } from "./Loader";
-export { default as Text } from "./Text";
+export { default as Collapsible } from "./Collapsible";
+/* should Stateful date pickers be exported? */
+export { DateRangePicker, SingleDatePicker } from "./DatePicker";
+export { default as Drawer } from "./Drawer";
+export { default as EmptyState } from "./EmptyState";
+export { default as Fieldset } from "./Fieldset";
+export { default as FormField } from "./FormField";
+export { default as Icon } from "./Icon";
 export { default as Image } from "./Image";
+export { default as Indicator } from "./Indicator";
+export { default as Input } from "./Input";
 export { default as KeyboardKey } from "./KeyboardKey";
-export { default as ChartLegend } from "./ChartLegend";
-export { default as Table } from "./Table";
-export { default as TableCell } from "./TableCell";
-export { default as TableHeaderCell } from "./TableHeaderCell";
-export { default as TableRowAccordion } from "./TableRowAccordion";
-export { default as Box } from "./Box";
 export { default as Label } from "./Label";
-export { default as Input } from "./Input";
-export { default as Select } from "./Select";
-export { default as Button } from "./Button";
 export { default as Link } from "./Link";
-export { default as Switch } from "./Switch";
-export { default as Token } from "./Token";
-export { default as TokenInput } from "./TokenInput";
-export { default as Tabs } from "./Tabs";
-export { default as Modal } from "./Modal";
-export { default as Popout } from "./Popout";
-export { default as ThemeProvider } from "./ThemeProvider";
-export { default as Tooltip } from "./Tooltip";
-export { default as Drawer } from "./Drawer";
+export { default as Listbox, ListboxButton } from "./Listbox";
+export { default as Loader } from "./Loader";
 export { default as LoaderButton } from "./LoaderButton";
-export { default as Numeral } from "./Numeral";
-export { default as Collapsible } from "./Collapsible";
-export { default as SegmentedControl } from "./SegmentedControl";
-export { default as EmptyState } from "./EmptyState";
-export { default as FormField } from "./FormField";
-export { default as Fieldset } from "./Fieldset";
-export { default as Message } from "./Message";
-export { default as Stack } from "./Stack";
-export { default as Avatar } from "./Avatar";
-export { default as Breadcrumb } from "./Breadcrumb";
-export { default as Skeleton } from "./Skeleton";
-export { default as ToastContainer, toast } from "./Toast";
 export { default as Menu, MenuButton } from "./Menu";
 export { MenuButtonContext } from "./Menu/hooks";
 export { MenuItemContainer } from "./Menu/styles";
-export { default as Listbox, ListboxButton } from "./Listbox";
+export { default as Message } from "./Message";
+export { default as Modal } from "./Modal";
+export { default as Numeral } from "./Numeral";
 export { default as OverflowList } from "./OverflowList";
-export { SingleDatePicker, DateRangePicker } from "./DatePicker";
-export { VisuallyHidden } from "./VisuallyHidden";
 export { default as PartnerLogo } from "./PartnerLogo";
-export { default as SpotIllustration } from "./SpotIllustration";
+export { default as Popout } from "./Popout";
+/* Should Portal be exported?
+export {default as Portal} from './Portal';
+export type {TypePortalProps} from './Portal/index.flow';
+*/
+export { default as Radio } from "./Radio";
+export { default as SegmentedControl } from "./SegmentedControl";
+export { default as Select } from "./Select";
+export { default as Skeleton } from "./Skeleton";
+export { default as SpotIllustration } from "./SpotIllustration";
+export { default as Stack } from "./Stack";
+export { default as Switch } from "./Switch";
+export { default as Table } from "./Table";
+export { default as TableCell } from "./TableCell";
+export { default as TableHeaderCell } from "./TableHeaderCell";
+export { default as TableRowAccordion } from "./TableRowAccordion";
+export { default as Tabs } from "./Tabs";
+export { default as Text } from "./Text";
+export { default as Textarea } from "./Textarea";
+export { default as ToastContainer, toast } from "./Toast";
+export { default as ToggleHint } from "./ToggleHint";
+export { default as Token } from "./Token";
+export { default as TokenInput } from "./TokenInput";
+export { default as Tooltip } from "./Tooltip";
+export { VisuallyHidden } from "./VisuallyHidden";
+
+/* Components types */
+
+/* Deprecated exports */
+/**
+ * @deprecated Use badgeColor instead
+ */
+export { legacyBadgeColors } from "./Badge/constants";
+/**
+ * @deprecated Alert has been renamed to Banner
+ */
+export { default as Alert } from "./Banner";
+
+/**
+ * Should this be exported? @deprecated?
+ */
+export { DataVizRotation } from "./dataviz";

package/lib/themes/dark/theme.js

@@ -1,13 +1,15 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+/* eslint-disable no-restricted-imports */
+import { transparentize } from 'polished';
 import COLORS from '@sproutsocial/seeds-color';
 import DEPTH from '@sproutsocial/seeds-depth';
+// json-to-scss is not working with the alias right now
+//import {theme as lightTheme} from '@src';
 import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
-import { transparentize } from 'polished';
 var MODE = 'dark';
 export var shadows = {
   low: "".concat(DEPTH.ELEVATION_LEVEL_100, " ").concat(COLORS.COLOR_NEUTRAL_1100, "FF"),

package/lib/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,7 +1,10 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/* eslint-disable no-restricted-imports */
 import { transparentize } from 'polished';
+// json-to-scss is not working with the alias right now
+//import {darkTheme as baseDarkTheme, type TypeSproutTheme} from '@src';
 import baseDarkTheme from "../../../dark/theme";
 export var navigation = {
   main: {

package/lib/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,7 +1,10 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/* eslint-disable no-restricted-imports */
 import { transparentize } from 'polished';
+// json-to-scss is not working with the alias right now
+//import {theme as baseLightTheme, type TypeSproutTheme} from '@src';
 import baseLightTheme from "../../../light/theme";
 export var navigation = {
   main: {

package/lib/themes/light/theme.js

@@ -2,17 +2,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import { transparentize } from 'polished';
 import COLORS from '@sproutsocial/seeds-color';
-import literalColors from "./literal-colors";
-import { datavizPalette } from "./dataviz-palette";
-import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
 import NETWORKCOLORS from '@sproutsocial/seeds-networkcolor';
 import TYPOGRAPHY from '@sproutsocial/seeds-typography';
 import SPACE from '@sproutsocial/seeds-space';
 import DEPTH from '@sproutsocial/seeds-depth';
 import MOTION from '@sproutsocial/seeds-motion';
 import BORDER from '@sproutsocial/seeds-border';
-import { transparentize } from 'polished';
+import literalColors from "./literal-colors";
+import { datavizPalette } from "./dataviz-palette";
+import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
 export var breakpoints = ['900px', '1200px', '1500px', '1800px'];
 var MODE = 'light';
 
@@ -284,12 +284,6 @@ export var fontWeights = {
   bold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_BOLD,
   extrabold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_EXTRA_BOLD
 };
-
-/**
- * @deprecated
- * Import from `Stack/TypeSpaceLiterals` instead.
- */
-
 export var space = {
   '0': SPACE.SPACE_SIZE_0,
   '100': SPACE.SPACE_SIZE_100,

package/lib/utils/hooks.js

@@ -10,7 +10,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
-import { canUseDOM } from "../utils";
+import { canUseDOM } from "./";
 export function useTextContent(initial) {
   var _useState = useState(initial),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/utils/mixins.js

@@ -1,7 +1,7 @@
 
+import { transparentize } from 'polished';
 import { css } from 'styled-components';
 import theme from "../themes/light/theme";
-import { transparentize } from 'polished';
 export var svgToDataURL = function svgToDataURL(svgStr) {
   var encoded = encodeURIComponent(svgStr).replace(/'/g, '%27').replace(/"/g, '%22');
   var header = 'data:image/svg+xml,';

package/lib/utils/react-testing-library.js

@@ -8,9 +8,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { act, cleanup, createEvent, fireEvent, queries, render, screen, wait, waitFor, waitForElement, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import ThemeProvider from "../ThemeProvider";
 import { a11yCheck } from "./a11yTest";
 import { dataQaLabelQueries } from "./dataQaLabelQueries";
-import ThemeProvider from "../ThemeProvider";
 var sproutQueries = _objectSpread(_objectSpread({}, queries), dataQaLabelQueries);
 var customRender = function customRender(node, options) {
   var api = render(node, _objectSpread(_objectSpread({}, options), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "12.24.0",
+  "version": "13.0.2",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -30,7 +30,7 @@
     "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",
-    "build": "npm-run-all clean -p build-icons build-package -s build-app",
+    "build": "npm-run-all -s clean build-icons build-package build-app",
     "flow": "yarn run build-icons && flow check --max-warnings 0",
     "lint-js": "eslint --max-warnings=0 --fix .",
     "lint-css": "stylelint 'src/**/*.js'",
@@ -38,6 +38,9 @@
     "jest": "jest",
     "jest:watch": "jest --watch",
     "test": "npm-run-all flow 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",
@@ -65,7 +68,7 @@
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
-    "lru-memoize": "^1.1.0",
+    "lru-memoize": "~1.0.2",
     "mutationobserver-shim": "^0.3.7",
     "polished": "^3.4.1",
     "raw-loader": "^3.0.0",
@@ -83,6 +86,8 @@
     "@babel/cli": "^7.5.5",
     "@babel/core": "^7.20.2",
     "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
@@ -118,6 +123,7 @@
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^2.0.7",
     "babel-polyfill": "^6.26.0",
+    "backstopjs": "^6.1.4",
     "chalk": "^2.3.2",
     "csstype": "^2.6.9",
     "eslint": "7.27.0",
@@ -133,7 +139,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "flow-bin": "0.120.1",
+    "flow-bin": "0.131.0",
     "glob": "^7.1.6",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
@@ -142,7 +148,7 @@
     "jest": "27.x.x",
     "jest-axe": "6.0.0",
     "jest-styled-components": "7.0.0-beta.1",
-    "jscodeshift": "^0.6.4",
+    "jscodeshift": "^0.14.0",
     "json-to-scss": "^1.6.2",
     "lint-staged": "^13.0.3",
     "moment": "^2.29.4",