@sproutsocial/racine 11.6.0 → 11.6.1-input-beta.3

package/__flow__/types/theme.colors.flow.js

@@ -229,7 +229,14 @@ type TypeElevationColors = {|
   },
 |};
 
-type TypeDatavizColors = typeof datavizPalette;
+type TypeDatavizColors = {|
+  DATAVIZ_COLORS_MAP: typeof datavizPalette.DATAVIZ_COLORS_MAP,
+  DATAVIZ_COLORS_LIST: typeof datavizPalette.DATAVIZ_COLORS_LIST,
+  dataviz: {
+    map: typeof datavizPalette.DATAVIZ_COLORS_MAP,
+    list: typeof datavizPalette.DATAVIZ_COLORS_LIST,
+  },
+|};
 
 type TypeNetworkColors = {|
   network: {

package/__flow__/types/theme.flow.js

@@ -13,7 +13,9 @@ import {
 } from "../themes/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
+import { navigation } from "../themes/extendedThemes/sproutTheme/light/theme";
 
+export type TypeThemeUtils = {| interact: (color: string) => string |};
 export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
@@ -30,6 +32,7 @@ export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
   mode: TypeThemeMode,
+  utils: TypeThemeUtils,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -44,17 +47,11 @@ export type TypeTheme = {
   duration: TypeDuration,
 };
 
-export type TypeNonColorThemeValues = {
-  mode: TypeThemeMode,
-  breakpoints: TypeBreakpoint,
-  typography: TypeTypography,
-  fontWeights: TypeFontWeight,
-  fontFamily: TypeFontFamily,
-  space: TypeSpace,
-  radii: TypeRadii,
-  borders: TypeBorder,
-  borderWidths: TypeBorderWidth,
-  shadows: TypeShadow,
-  easing: TypeEasing,
-  duration: TypeDuration,
+// Extended themes
+export type TypeSproutTheme = {
+  ...$Exact<TypeTheme>,
+  colors: {|
+    ...$Exact<TypeColor>,
+    navigation: typeof navigation,
+  |},
 };

package/__flow__/utils/responsiveProps/index.test.js

@@ -19,13 +19,21 @@ describe("normalizeResponsiveProp", () => {
 
   it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      0, 1, 2, 3, 3,
+      0,
+      1,
+      2,
+      3,
+      3,
     ]);
   });
 
   it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
-      0, 1, 2, 3, 4,
+      0,
+      1,
+      2,
+      3,
+      4,
     ]);
   });
 });

package/commonjs/Input/index.js

@@ -41,7 +41,6 @@ var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
 
 var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
-      onClear = _React$useContext.onClear,
       handleClear = _React$useContext.handleClear,
       clearButtonLabel = _React$useContext.clearButtonLabel,
       hasValue = _React$useContext.hasValue,
@@ -50,13 +49,6 @@ var ClearButton = function ClearButton() {
 
   if (!hasValue) {
     return null;
-  } // Log a warning and hide the button when no onClear callback is provided.
-  // If we called handleClear with no onClear prop, all the button would do is focus the Input.
-
-
-  if (!onClear) {
-    console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
-    return null;
   } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
 
 
@@ -95,14 +87,10 @@ var isClearButton = function isClearButton(elem) {
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
-  function Input() {
+  function Input(props) {
     var _this;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$Component.call(this, props) || this;
     _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
@@ -110,14 +98,29 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$inputRef, _this$inputRef$curren;
+      var input = _this.inputRef.current;
+
+      if (input) {
+        // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
+        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+        nativeInputValueSetter.call(input, "");
+        var inputEvent = new Event("input", {
+          bubbles: true
+        });
+        input.dispatchEvent(inputEvent); // Focus the input, update hasValue, and call any onClear callback
+
+        input.focus();
+
+        _this.updateState("");
 
-      (_this$inputRef = _this.inputRef) == null ? void 0 : (_this$inputRef$curren = _this$inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
-      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+        _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+      }
     };
 
     _this.handleChange = function (e) {
-      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
+      _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
+
+      _this.updateState(e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
@@ -136,6 +139,22 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
+    _this.updateState = function (inputValue) {
+      var hasValue = inputValue !== "";
+      var previousHasValue = _this.state.hasValue; // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
+
+      if (hasValue !== previousHasValue) {
+        _this.setState({
+          hasValue: hasValue
+        });
+      }
+    };
+
+    _this.state = {
+      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
+      // for both controlled and uncontrolled inputs.
+      hasValue: !!props.value
+    };
     return _this;
   }
 
@@ -189,9 +208,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
       name: "search",
       ariaHidden: true,
       color: "icon.base"
-    }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+    }) : elemBefore; // Do not add a ClearButton if an elemAfter prop was passed.
 
-    var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
+    var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
     return /*#__PURE__*/React.createElement(_styles.default, _extends({
       hasBeforeElement: !!elementBefore,
       hasAfterElement: !!elementAfter,
@@ -204,9 +223,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
-        hasValue: !!value,
+        hasValue: this.state.hasValue,
         clearButtonLabel: clearButtonLabel,
-        onClear: onClear,
         size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {

package/commonjs/Input/styles.js

@@ -84,9 +84,9 @@ var Accessory = _styledComponents.default.div.withConfig({
 })(["position:absolute;top:50%;transform:translateY(-50%);color:", ";display:flex;align-items:center;", ";", ";"], function (props) {
   return props.theme.colors.icon.base;
 }, function (props) {
-  return props.before && (0, _styledComponents.css)(["left:", ";"], props.theme.space[350]);
+  return props.before && (0, _styledComponents.css)(["left:", ";"], props.theme.space[300]);
 }, function (props) {
-  return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
+  return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
 
 exports.Accessory = Accessory;

package/commonjs/themes/dark/theme.js

@@ -31,9 +31,6 @@ var shadows = {
 exports.shadows = shadows;
 
 var colors = _extends({}, _theme.default.colors, {
-  utils: {
-    interact: (0, _interact.default)(MODE)
-  },
   app: {
     background: {
       base: _seedsColor.default.COLOR_NEUTRAL_1000
@@ -237,6 +234,9 @@ var colors = _extends({}, _theme.default.colors, {
 }, _datavizPalette.datavizPalette);
 
 var darkTheme = _extends({}, _theme.default, {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   colors: colors,
   shadows: shadows,
   mode: MODE

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

@@ -1,28 +1,49 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
-
-var _justClone = _interopRequireDefault(require("just-clone"));
+exports.navigation = exports.default = void 0;
 
 var _theme = _interopRequireDefault(require("../../../dark/theme"));
 
-var _getDarkThemeColors = require("./getDarkThemeColors");
-
-var _NonColorThemeValues = require("../NonColorThemeValues");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
 
-// clone base theme. (we don't want to mutate the base theme)
-var themeClone = (0, _justClone.default)(_theme.default); // get non color theme values
-
-var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific dark theme colors
-
-var darkThemeColors = (0, _getDarkThemeColors.getDarkThemeColors)(themeClone.colors);
-
-var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
+var navigation = {
+  main: {
+    background: {
+      base: _theme.default.colors.neutral[1000],
+      overflowGradient: _theme.default.colors.neutral[1100]
+    }
+  },
+  secondary: {
+    background: {
+      base: _theme.default.colors.neutral[900]
+    }
+  },
+  text: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  icon: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: _theme.default.colors.neutral[1000],
+      hover: _theme.default.colors.neutral[1100],
+      selected: _theme.default.colors.neutral[700]
+    }
+  }
+};
+exports.navigation = navigation;
+
+var darkTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    navigation: navigation
+  })
+});
 
 var _default = darkTheme;
 exports.default = _default;

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

@@ -1,28 +1,49 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
-
-var _justClone = _interopRequireDefault(require("just-clone"));
+exports.navigation = exports.default = void 0;
 
 var _theme = _interopRequireDefault(require("../../../light/theme"));
 
-var _getLightThemeColors = require("./getLightThemeColors");
-
-var _NonColorThemeValues = require("../NonColorThemeValues");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
 
-// clone base theme. (we don't want to mutate the base theme)
-var themeClone = (0, _justClone.default)(_theme.default); // get non color theme values
-
-var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific light theme colors
-
-var lightThemeColors = (0, _getLightThemeColors.getLightThemeColors)(themeClone.colors);
-
-var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
+var navigation = {
+  main: {
+    background: {
+      base: _theme.default.colors.neutral[900],
+      overflowGradient: _theme.default.colors.neutral[1000]
+    }
+  },
+  secondary: {
+    background: {
+      base: _theme.default.colors.neutral[800]
+    }
+  },
+  text: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  icon: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: _theme.default.colors.neutral[800],
+      hover: _theme.default.colors.neutral[1000],
+      selected: _theme.default.colors.neutral[700]
+    }
+  }
+};
+exports.navigation = navigation;
+
+var lightTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    navigation: navigation
+  })
+});
 
 var _default = lightTheme;
 exports.default = _default;

package/commonjs/types/theme.flow.js

@@ -1,3 +1,5 @@
 "use strict";
 
-var _theme = require("../themes/light/theme");
+var _theme = require("../themes/light/theme");
+
+var _theme2 = require("../themes/extendedThemes/sproutTheme/light/theme");

package/dist/themes/dark/dark.scss

@@ -430,9 +430,6 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
-      ),
-      utils: (
-        
       )
     ),
     typography: (

package/lib/Input/index.js

@@ -24,7 +24,6 @@ var StyledButton = styled(Button).withConfig({
 
 var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
-      onClear = _React$useContext.onClear,
       handleClear = _React$useContext.handleClear,
       clearButtonLabel = _React$useContext.clearButtonLabel,
       hasValue = _React$useContext.hasValue,
@@ -33,13 +32,6 @@ var ClearButton = function ClearButton() {
 
   if (!hasValue) {
     return null;
-  } // Log a warning and hide the button when no onClear callback is provided.
-  // If we called handleClear with no onClear prop, all the button would do is focus the Input.
-
-
-  if (!onClear) {
-    console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
-    return null;
   } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
 
 
@@ -78,14 +70,10 @@ var isClearButton = function isClearButton(elem) {
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
-  function Input() {
+  function Input(props) {
     var _this;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$Component.call(this, props) || this;
     _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
@@ -93,14 +81,29 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$inputRef, _this$inputRef$curren;
+      var input = _this.inputRef.current;
+
+      if (input) {
+        // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
+        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+        nativeInputValueSetter.call(input, "");
+        var inputEvent = new Event("input", {
+          bubbles: true
+        });
+        input.dispatchEvent(inputEvent); // Focus the input, update hasValue, and call any onClear callback
+
+        input.focus();
+
+        _this.updateState("");
 
-      (_this$inputRef = _this.inputRef) == null ? void 0 : (_this$inputRef$curren = _this$inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
-      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+        _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+      }
     };
 
     _this.handleChange = function (e) {
-      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
+      _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
+
+      _this.updateState(e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
@@ -119,6 +122,22 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
+    _this.updateState = function (inputValue) {
+      var hasValue = inputValue !== "";
+      var previousHasValue = _this.state.hasValue; // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
+
+      if (hasValue !== previousHasValue) {
+        _this.setState({
+          hasValue: hasValue
+        });
+      }
+    };
+
+    _this.state = {
+      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
+      // for both controlled and uncontrolled inputs.
+      hasValue: !!props.value
+    };
     return _this;
   }
 
@@ -172,9 +191,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
       name: "search",
       ariaHidden: true,
       color: "icon.base"
-    }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+    }) : elemBefore; // Do not add a ClearButton if an elemAfter prop was passed.
 
-    var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
+    var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
     return /*#__PURE__*/React.createElement(Container, _extends({
       hasBeforeElement: !!elementBefore,
       hasAfterElement: !!elementAfter,
@@ -187,9 +206,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
-        hasValue: !!value,
+        hasValue: this.state.hasValue,
         clearButtonLabel: clearButtonLabel,
-        onClear: onClear,
         size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {

package/lib/Input/styles.js

@@ -71,9 +71,9 @@ export var Accessory = styled.div.withConfig({
 })(["position:absolute;top:50%;transform:translateY(-50%);color:", ";display:flex;align-items:center;", ";", ";"], function (props) {
   return props.theme.colors.icon.base;
 }, function (props) {
-  return props.before && css(["left:", ";"], props.theme.space[350]);
+  return props.before && css(["left:", ";"], props.theme.space[300]);
 }, function (props) {
-  return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
+  return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
 Container.displayName = "InputContainer";
 Accessory.displayName = "InputAccessory";

package/lib/themes/dark/theme.js

@@ -15,9 +15,6 @@ export var shadows = {
 }; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
 var colors = _extends({}, lightTheme.colors, {
-  utils: {
-    interact: interact(MODE)
-  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000
@@ -221,6 +218,9 @@ var colors = _extends({}, lightTheme.colors, {
 }, datavizPalette);
 
 var darkTheme = _extends({}, lightTheme, {
+  utils: {
+    interact: interact(MODE)
+  },
   colors: colors,
   shadows: shadows,
   mode: MODE

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

@@ -1,16 +1,39 @@
 function _extends() { _extends = Object.assign || 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 clone from "just-clone";
 import baseDarkTheme from "../../../dark/theme";
-import { getDarkThemeColors } from "./getDarkThemeColors";
-import { getNonColorThemeValues } from "../NonColorThemeValues";
-// clone base theme. (we don't want to mutate the base theme)
-var themeClone = clone(baseDarkTheme); // get non color theme values
+export var navigation = {
+  main: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      overflowGradient: baseDarkTheme.colors.neutral[1100]
+    }
+  },
+  secondary: {
+    background: {
+      base: baseDarkTheme.colors.neutral[900]
+    }
+  },
+  text: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0]
+  },
+  icon: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      hover: baseDarkTheme.colors.neutral[1100],
+      selected: baseDarkTheme.colors.neutral[700]
+    }
+  }
+};
 
-var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific dark theme colors
-
-var darkThemeColors = getDarkThemeColors(themeClone.colors);
-
-var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
+var darkTheme = _extends({}, baseDarkTheme, {
+  colors: _extends({}, baseDarkTheme.colors, {
+    navigation: navigation
+  })
+});
 
 export default darkTheme;

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

@@ -1,16 +1,39 @@
 function _extends() { _extends = Object.assign || 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 clone from "just-clone";
 import baseLightTheme from "../../../light/theme";
-import { getLightThemeColors } from "./getLightThemeColors";
-import { getNonColorThemeValues } from "../NonColorThemeValues";
-// clone base theme. (we don't want to mutate the base theme)
-var themeClone = clone(baseLightTheme); // get non color theme values
+export var navigation = {
+  main: {
+    background: {
+      base: baseLightTheme.colors.neutral[900],
+      overflowGradient: baseLightTheme.colors.neutral[1000]
+    }
+  },
+  secondary: {
+    background: {
+      base: baseLightTheme.colors.neutral[800]
+    }
+  },
+  text: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0]
+  },
+  icon: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+      hover: baseLightTheme.colors.neutral[1000],
+      selected: baseLightTheme.colors.neutral[700]
+    }
+  }
+};
 
-var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific light theme colors
-
-var lightThemeColors = getLightThemeColors(themeClone.colors);
-
-var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
+var lightTheme = _extends({}, baseLightTheme, {
+  colors: _extends({}, baseLightTheme.colors, {
+    navigation: navigation
+  })
+});
 
 export default lightTheme;

package/lib/types/theme.flow.js

@@ -1 +1,2 @@
-import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
+import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
+import { navigation } from "../themes/extendedThemes/sproutTheme/light/theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.6.0",
+  "version": "11.6.1-input-beta.3",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -66,7 +66,6 @@
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
-    "just-clone": "^5.0.1",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "^1.1.0",
@@ -167,7 +166,7 @@
     "svgo": "^1.3.0",
     "svgstore": "^2.0.3",
     "webpack": "^4.20.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^4.9.0"
   },
   "peerDependencies": {
     "@sproutsocial/seeds-border": ">=0.3.0",