@sproutsocial/racine 11.4.2-input-beta.0 → 11.6.1-theme-type.0

package/commonjs/Button/index.js

@@ -65,5 +65,6 @@ var Button = function Button(_ref) {
   }, qa, rest), children);
 };
 
+Button.displayName = "Button";
 var _default = Button;
 exports.default = _default;

package/commonjs/Button/styles.js

@@ -60,6 +60,7 @@ var Container = _styledComponents.default.button.withConfig({
   return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", _mixins.pill);
 }, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON);
 
+Container.displayName = "Button-Container";
 var _default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}
 
 exports.default = _default;

package/commonjs/Input/index.js

@@ -95,10 +95,14 @@ var isClearButton = function isClearButton(elem) {
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
-  function Input(props) {
+  function Input() {
     var _this;
 
-    _this = _React$Component.call(this, props) || 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.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
@@ -113,9 +117,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleChange = function (e) {
-      _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
-
-      _this.updateState(e.currentTarget.value);
+      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
@@ -134,22 +136,6 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
-    _this.updateState = function (value) {
-      var hasValue = value !== "";
-      var hadValue = _this.state.hasValue; // Only update state if the value has changed to avoid unnecessary renders.
-
-      if (hasValue !== hadValue) {
-        _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;
   }
 
@@ -218,7 +204,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
-        hasValue: this.state.hasValue,
+        hasValue: !!value,
         clearButtonLabel: clearButtonLabel,
         onClear: onClear,
         size: size

package/commonjs/Message/styles.js

@@ -105,7 +105,7 @@ exports.MessageBody = MessageBody;
 var MessageFooter = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageFooter",
   componentId: "sc-1ju6d1v-3"
-})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";>:first-child{margin-left:-", ";}"], function (props) {
+})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
   return props.density === _Message.default.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);

package/commonjs/index.js

@@ -61,6 +61,8 @@ var _exportNames = {
   Menu: true,
   Listbox: true,
   OverflowList: true,
+  sproutLightTheme: true,
+  sproutDarkTheme: true,
   toast: true,
   MenuButton: true,
   MenuButtonContext: true,
@@ -70,7 +72,7 @@ var _exportNames = {
   DateRangePicker: true,
   VisuallyHidden: true
 };
-exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.toast = exports.theme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
+exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
 
 var _systemProps = require("./systemProps");
 
@@ -101,6 +103,11 @@ var _theme2 = _interopRequireDefault(require("./themes/dark/theme"));
 
 exports.darkTheme = _theme2.default;
 
+var _sproutTheme = require("./themes/extendedThemes/sproutTheme");
+
+exports.sproutLightTheme = _sproutTheme.sproutLightTheme;
+exports.sproutDarkTheme = _sproutTheme.sproutDarkTheme;
+
 var _Icon = _interopRequireDefault(require("./Icon"));
 
 exports.Icon = _Icon.default;

package/commonjs/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNonColorThemeValues = getNonColorThemeValues;
+var _excluded = ["colors"];
+
+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); }
+
+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 getNonColorThemeValues(theme) {
+  var colors = theme.colors,
+      otherThemeValues = _objectWithoutPropertiesLoose(theme, _excluded);
+
+  return _extends({}, otherThemeValues);
+}

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

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getDarkThemeColors = getDarkThemeColors;
+
+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); }
+
+function getDarkThemeColors(themeColors) {
+  return _extends({}, themeColors, {
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[1000],
+          gradient: themeColors.neutral[1100]
+        }
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[900]
+        }
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[1000],
+          hover: themeColors.neutral[1100],
+          active: themeColors.neutral[700]
+        }
+      }
+    }
+  });
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+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 _default = darkTheme;
+exports.default = _default;

package/commonjs/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.sproutLightTheme = exports.sproutDarkTheme = void 0;
+
+var _theme = _interopRequireDefault(require("./light/theme"));
+
+exports.sproutLightTheme = _theme.default;
+
+var _theme2 = _interopRequireDefault(require("./dark/theme"));
+
+exports.sproutDarkTheme = _theme2.default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getLightThemeColors = getLightThemeColors;
+
+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); }
+
+function getLightThemeColors(themeColors) {
+  return _extends({}, themeColors, {
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[900],
+          overflowGradient: themeColors.neutral[1000]
+        }
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[800]
+        }
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[800],
+          hover: themeColors.neutral[1000],
+          selected: themeColors.neutral[700]
+        }
+      }
+    }
+  });
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+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 _default = lightTheme;
+exports.default = _default;

package/lib/Button/index.js

@@ -53,4 +53,5 @@ var Button = function Button(_ref) {
   }, qa, rest), children);
 };
 
+Button.displayName = "Button";
 export default Button;

package/lib/Button/styles.js

@@ -44,4 +44,5 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", pill);
 }, Icon, LAYOUT, COMMON);
+Container.displayName = "Button-Container";
 export default Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/lib/Input/index.js

@@ -78,10 +78,14 @@ var isClearButton = function isClearButton(elem) {
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
-  function Input(props) {
+  function Input() {
     var _this;
 
-    _this = _React$Component.call(this, props) || 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.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
@@ -96,9 +100,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleChange = function (e) {
-      _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
-
-      _this.updateState(e.currentTarget.value);
+      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
@@ -117,22 +119,6 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
-    _this.updateState = function (value) {
-      var hasValue = value !== "";
-      var hadValue = _this.state.hasValue; // Only update state if the value has changed to avoid unnecessary renders.
-
-      if (hasValue !== hadValue) {
-        _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;
   }
 
@@ -201,7 +187,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
-        hasValue: this.state.hasValue,
+        hasValue: !!value,
         clearButtonLabel: clearButtonLabel,
         onClear: onClear,
         size: size

package/lib/Message/styles.js

@@ -91,7 +91,7 @@ export var MessageBody = styled(Box).withConfig({
 export var MessageFooter = styled(Box).withConfig({
   displayName: "styles__MessageFooter",
   componentId: "sc-1ju6d1v-3"
-})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";>:first-child{margin-left:-", ";}"], function (props) {
+})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
   return props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);

package/lib/index.js

@@ -3,6 +3,7 @@ export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
 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";

package/lib/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -0,0 +1,12 @@
+var _excluded = ["colors"];
+
+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); }
+
+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; }
+
+export function getNonColorThemeValues(theme) {
+  var colors = theme.colors,
+      otherThemeValues = _objectWithoutPropertiesLoose(theme, _excluded);
+
+  return _extends({}, otherThemeValues);
+}

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

@@ -0,0 +1,34 @@
+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); }
+
+export function getDarkThemeColors(themeColors) {
+  return _extends({}, themeColors, {
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[1000],
+          gradient: themeColors.neutral[1100]
+        }
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[900]
+        }
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[1000],
+          hover: themeColors.neutral[1100],
+          active: themeColors.neutral[700]
+        }
+      }
+    }
+  });
+}

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

@@ -0,0 +1,16 @@
+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
+
+var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific dark theme colors
+
+var darkThemeColors = getDarkThemeColors(themeClone.colors);
+
+var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
+
+export default darkTheme;

package/lib/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,2 @@
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

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

@@ -0,0 +1,34 @@
+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); }
+
+export function getLightThemeColors(themeColors) {
+  return _extends({}, themeColors, {
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[900],
+          overflowGradient: themeColors.neutral[1000]
+        }
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[800]
+        }
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[800],
+          hover: themeColors.neutral[1000],
+          selected: themeColors.neutral[700]
+        }
+      }
+    }
+  });
+}

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

@@ -0,0 +1,16 @@
+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
+
+var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific light theme colors
+
+var lightThemeColors = getLightThemeColors(themeClone.colors);
+
+var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
+
+export default lightTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.4.2-input-beta.0",
+  "version": "11.6.1-theme-type.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -66,10 +66,11 @@
   "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",
-    "mutationobserver-shim": "^0.3.3",
+    "mutationobserver-shim": "^0.3.7",
     "polished": "^3.4.1",
     "raw-loader": "^3.0.0",
     "react-focus-lock": "^2.0.3",
@@ -84,7 +85,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.8.0",
@@ -99,23 +100,26 @@
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
     "@sproutsocial/seeds-typography": "^3.0.1",
-    "@storybook/addon-a11y": "^6.1.11",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-knobs": "^6.1.11",
-    "@storybook/addon-storysource": "^6.1.11",
-    "@storybook/addon-viewport": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-controls": "^6.4.19",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-viewport": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.1.11",
+    "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.0",
+    "axios": "^0.26.1",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.1.0",
-    "babel-loader": "8.0.6",
+    "babel-jest": "27.x.x",
+    "babel-loader": "8.2.3",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-polished": "^1.1.0",
-    "babel-plugin-styled-components": "^1.10.0",
+    "babel-plugin-styled-components": "^2.0.7",
     "babel-polyfill": "^6.26.0",
     "chalk": "^2.3.2",
     "chokidar": "^3.0.2",
@@ -137,9 +141,8 @@
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^6.4.1",
     "is-glob": "^4.0.1",
-    "jest": "26.1.0",
-    "jest-axe": "3.4.0",
-    "jest-dom": "^3.5.0",
+    "jest": "27.x.x",
+    "jest-axe": "6.0.0",
     "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.6.4",
     "json-to-scss": "^1.6.2",
@@ -148,15 +151,15 @@
     "npm-run-all": "^4.1.2",
     "outdent": "^0.7.0",
     "pify": "^4.0.1",
-    "playroom": "^0.22.2",
+    "playroom": "^0.27.9",
     "prettier": "^2.0.5",
     "prop-types": "^15.6.1",
     "react": "16.12.0",
     "react-dates": "^21.8.0",
     "react-dom": "16.12.0",
     "rimraf": "^2.6.3",
-    "storybook-dark-mode": "^1.0.7",
-    "styled-components": "5.0.0-rc.2",
+    "storybook-dark-mode": "^1.0.9",
+    "styled-components": "^5.2.3",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended": "^2.2.0",
     "stylelint-config-styled-components": "^0.1.1",
@@ -178,13 +181,15 @@
     "prop-types": "^15.0.0",
     "react": "^16.2.0",
     "react-dates": "^21.8.0",
-    "styled-components": "^5.0.0-rc.2"
+    "react-virtualized": "9.18.5",
+    "styled-components": "^5.2.3"
   },
   "resolutions": {
     "lodash": "^4.17.21",
     "react-popper/create-react-context": "^0.3.0"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.js"
     ],