@sproutsocial/racine 11.9.0-typescript.0 → 12.0.0

package/commonjs/Button/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["href", "appearance", "active", "disabled", "external", "children", "size", "innerRef", "onClick", "title", "qa", "as", "ariaLabel"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+var Button = function Button(_ref) {
+  var href = _ref.href,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      disabled = _ref.disabled,
+      external = _ref.external,
+      children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "default" : _ref$size,
+      innerRef = _ref.innerRef,
+      onClick = _ref.onClick,
+      title = _ref.title,
+      _ref$qa = _ref.qa,
+      qa = _ref$qa === void 0 ? {} : _ref$qa,
+      as = _ref.as,
+      ariaLabel = _ref.ariaLabel,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  if (!href && external) {
+    console.warn("Warning: external prop cannot be set without a href declaration");
+  } // plans to properly deprecate captured in DS-1096
+
+
+  var appearanceCheck = appearance === "default" ? "unstyled" : appearance;
+  return /*#__PURE__*/React.createElement(_styles.default, _extends({
+    title: title,
+    active: active,
+    href: href,
+    target: external ? "_blank" : undefined,
+    rel: external ? "noopener noreferrer" : undefined,
+    as: as || (href ? "a" : "button"),
+    type: href ? undefined : "button",
+    "aria-disabled": disabled ? disabled : undefined,
+    disabled: disabled,
+    buttonSize: size,
+    appearance: appearanceCheck,
+    ref: innerRef,
+    onClick: onClick,
+    "data-qa-button": title || "",
+    "data-qa-button-isdisabled": disabled === true,
+    "aria-label": ariaLabel
+  }, qa, rest), children);
+};
+
+Button.displayName = "Button";
+var _default = Button;
+exports.default = _default;

package/commonjs/Button/styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _systemProps = require("../utils/system-props");
+
+var _mixins = require("../utils/mixins");
+
+var _styles = _interopRequireDefault(require("../Icon/styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Container = _styledComponents.default.button.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1juy94s-0"
+})(["display:inline-block;box-sizing:border-box;text-align:center;font-family:", ";border:1px solid ", ";border-radius:", ";border-style:", ";background:", ";color:", ";cursor:pointer;text-decoration:none;line-height:16px;white-space:nowrap;font-weight:", ";transition:all ", " linear;margin:0;padding:", ";font-size:", ";&:visited{color:", ";}&:hover{color:", ";background:", ";text-decoration:none;box-shadow:", ";}&:active{color:", ";background:", ";transform:translateY(1px);}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", "{vertical-align:text-bottom;}", " ", ""], function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].border.base;
+}, function (props) {
+  return props.theme.radii[500];
+}, function (props) {
+  return props.appearance === "placeholder" ? "dashed" : "solid";
+}, function (props) {
+  return props.theme.colors.button[props.appearance].background.base;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].text.base;
+}, function (props) {
+  return props.theme.fontWeights.bold;
+}, function (props) {
+  return props.theme.duration.fast;
+}, function (props) {
+  return props.buttonSize === "default" ? "" + props.theme.space[300] : "" + props.theme.space[350];
+}, function (props) {
+  return props.buttonSize === "default" ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].text.base;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].text.hover;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].background.hover;
+}, function (props) {
+  return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
+}, function (props) {
+  return props.theme.colors.button[props.appearance].text.hover;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].background.active;
+}, _mixins.focusRing, function (props) {
+  return props.active && (0, _styledComponents.css)(["color:", " !important;background:", " !important;"], props.theme.colors.button[props.appearance].text.hover, props.theme.colors.button[props.appearance].background.active);
+}, function (props) {
+  return props.disabled && _mixins.disabled;
+}, function (props) {
+  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

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _utils = require("../utils");
 
+var _useInteractiveColor = require("../utils/useInteractiveColor");
+
 var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,7 +38,7 @@ var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "Input__StyledButton",
   componentId: "sc-1ck1dnm-0"
 })(["&:hover,&:active{color:", ";}"], function (props) {
-  return props.theme.utils.interact(props.theme.colors.icon.base);
+  return (0, _useInteractiveColor.useInteractiveColor)(props.theme.colors.icon.base);
 });
 
 var ClearButton = function ClearButton() {

package/commonjs/Token/styles.js

@@ -9,6 +9,8 @@ var _systemProps = require("../utils/system-props");
 
 var _mixins = require("../utils/mixins");
 
+var _useInteractiveColor = require("../utils/useInteractiveColor");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,13 +22,13 @@ var Container = _styledComponents.default.button.withConfig({
   var theme = _ref.theme;
   return (0, _styledComponents.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);
 }, _mixins.focusRing, function (_ref2) {
-  var theme = _ref2.theme,
-      palette = _ref2.palette;
-  return palette === "blue" && (0, _styledComponents.css)(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, theme.utils.interact(theme.colors.container.border.decorative.blue));
+  var closeable = _ref2.closeable,
+      theme = _ref2.theme;
+  return closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.base));
 }, function (_ref3) {
-  var closeable = _ref3.closeable,
-      theme = _ref3.theme;
-  return closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+  var theme = _ref3.theme,
+      palette = _ref3.palette;
+  return palette === "blue" && (0, _styledComponents.css)(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.decorative.blue));
 }, function (_ref4) {
   var disabled = _ref4.disabled,
       theme = _ref4.theme;
@@ -34,7 +36,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (_ref5) {
   var valid = _ref5.valid,
       theme = _ref5.theme;
-  return !valid && (0, _styledComponents.css)(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, theme.utils.interact(theme.colors.container.border.error));
+  return !valid && (0, _styledComponents.css)(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.error));
 }, _systemProps.COMMON);
 
 var _default = Container;

package/commonjs/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   useSelect: true,
   useMultiselect: true,
   useTextContent: true,
+  useInteractiveColor: true,
   theme: true,
   darkTheme: true,
   Icon: true,
@@ -72,7 +73,7 @@ var _exportNames = {
   DateRangePicker: true,
   VisuallyHidden: true
 };
-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;
+exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.useInteractiveColor = 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");
 
@@ -95,6 +96,10 @@ exports.useSelect = _hooks.useSelect;
 exports.useMultiselect = _hooks.useMultiselect;
 exports.useTextContent = _hooks.useTextContent;
 
+var _useInteractiveColor = require("./utils/useInteractiveColor");
+
+exports.useInteractiveColor = _useInteractiveColor.useInteractiveColor;
+
 var _theme = _interopRequireDefault(require("./themes/light/theme"));
 
 exports.theme = _theme.default;

package/commonjs/themes/dark/theme.js

@@ -15,8 +15,6 @@ var _decorativePalettes = require("./decorative-palettes");
 
 var _polished = require("polished");
 
-var _interact = _interopRequireDefault(require("../utils/interact"));
-
 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); }
@@ -234,9 +232,6 @@ 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,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navigation = exports.default = exports.datePicker = void 0;
+exports.navigation = exports.default = exports.datePicker = exports.analytics = void 0;
 
 var _theme = _interopRequireDefault(require("../../../dark/theme"));
 
@@ -49,11 +49,20 @@ var datePicker = {
   }
 };
 exports.datePicker = datePicker;
+var analytics = {
+  trend: {
+    positive: _theme.default.colors.teal[500],
+    neutral: _theme.default.colors.neutral[100],
+    negative: _theme.default.colors.neutral[100]
+  }
+};
+exports.analytics = analytics;
 
 var darkTheme = _extends({}, _theme.default, {
   colors: _extends({}, _theme.default.colors, {
     navigation: navigation,
-    datePicker: datePicker
+    datePicker: datePicker,
+    analytics: analytics
   })
 });
 

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

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navigation = exports.default = exports.datePicker = void 0;
+exports.navigation = exports.default = exports.datePicker = exports.analytics = void 0;
 
 var _theme = _interopRequireDefault(require("../../../light/theme"));
 
@@ -49,11 +49,20 @@ var datePicker = {
   }
 };
 exports.datePicker = datePicker;
+var analytics = {
+  trend: {
+    positive: _theme.default.colors.teal[800],
+    neutral: _theme.default.colors.neutral[800],
+    negative: _theme.default.colors.neutral[800]
+  }
+};
+exports.analytics = analytics;
 
 var lightTheme = _extends({}, _theme.default, {
   colors: _extends({}, _theme.default.colors, {
     navigation: navigation,
-    datePicker: datePicker
+    datePicker: datePicker,
+    analytics: analytics
   })
 });
 

package/commonjs/themes/light/theme.js

@@ -25,8 +25,6 @@ var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"))
 
 var _polished = require("polished");
 
-var _interact = _interopRequireDefault(require("../utils/interact"));
-
 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); }
@@ -338,9 +336,6 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
-  utils: {
-    interact: (0, _interact.default)(MODE)
-  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {

package/commonjs/utils/useInteractiveColor.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useInteractiveColor = void 0;
+
+var _polished = require("polished");
+
+var _styledComponents = require("styled-components");
+
+/**
+ * The useInteractiveColor hook has context of theme mode (light or dark)
+ * and can be used to lighten or darken a color dynamically
+ *
+ * note: colors are limited to our theme colors
+ */
+var useInteractiveColor = function useInteractiveColor(themeColor) {
+  // Throw error if used outside of a ThemeProvider (styled-components)
+  if (!(0, _styledComponents.useTheme)()) {
+    throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");
+  } // Get the current theme mode ie. 'light' or 'dark'
+
+
+  var themeMode = (0, _styledComponents.useTheme)().mode; // If the theme mode is dark, return a lightened version of the themeValue
+
+  if (themeMode === "dark") {
+    return (0, _polished.lighten)(0.2, themeColor);
+  } else {
+    // If the theme mode is light, return a darkened version of the themeValue
+    return (0, _polished.darken)(0.2, themeColor);
+  }
+};
+
+exports.useInteractiveColor = useInteractiveColor;

package/dist/themes/dark/theme.scss

@@ -1,9 +1,6 @@
 $theme: (
   __esModule: true,
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (

package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss

@@ -1,5 +1,12 @@
 $theme: (
   __esModule: true,
+  analytics: (
+    trend: (
+      positive: #08c4b2,
+      neutral: #f3f4f4,
+      negative: #f3f4f4
+    )
+  ),
   datePicker: (
     comparison: (
       background: (
@@ -11,9 +18,6 @@ $theme: (
     )
   ),
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -478,6 +482,13 @@ $theme: (
             base: #364141
           )
         )
+      ),
+      analytics: (
+        trend: (
+          positive: #08c4b2,
+          neutral: #f3f4f4,
+          negative: #f3f4f4
+        )
       )
     ),
     typography: (

package/dist/themes/extendedThemes/sproutTheme/light/theme.scss

@@ -1,5 +1,12 @@
 $theme: (
   __esModule: true,
+  analytics: (
+    trend: (
+      positive: #067c7c,
+      neutral: #364141,
+      negative: #364141
+    )
+  ),
   datePicker: (
     comparison: (
       background: (
@@ -11,9 +18,6 @@ $theme: (
     )
   ),
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -478,6 +482,13 @@ $theme: (
             base: #364141
           )
         )
+      ),
+      analytics: (
+        trend: (
+          positive: #067c7c,
+          neutral: #364141,
+          negative: #364141
+        )
       )
     ),
     typography: (

package/dist/themes/light/theme.scss

@@ -8,9 +8,6 @@ $theme: (
   ),
   breakpoints: (900px, 1200px, 1500px, 1800px),
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (

package/lib/Button/index.js

@@ -0,0 +1,57 @@
+var _excluded = ["href", "appearance", "active", "disabled", "external", "children", "size", "innerRef", "onClick", "title", "qa", "as", "ariaLabel"];
+
+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; }
+
+import * as React from "react";
+import Container from "./styles";
+
+var Button = function Button(_ref) {
+  var href = _ref.href,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      disabled = _ref.disabled,
+      external = _ref.external,
+      children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "default" : _ref$size,
+      innerRef = _ref.innerRef,
+      onClick = _ref.onClick,
+      title = _ref.title,
+      _ref$qa = _ref.qa,
+      qa = _ref$qa === void 0 ? {} : _ref$qa,
+      as = _ref.as,
+      ariaLabel = _ref.ariaLabel,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  if (!href && external) {
+    console.warn("Warning: external prop cannot be set without a href declaration");
+  } // plans to properly deprecate captured in DS-1096
+
+
+  var appearanceCheck = appearance === "default" ? "unstyled" : appearance;
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    title: title,
+    active: active,
+    href: href,
+    target: external ? "_blank" : undefined,
+    rel: external ? "noopener noreferrer" : undefined,
+    as: as || (href ? "a" : "button"),
+    type: href ? undefined : "button",
+    "aria-disabled": disabled ? disabled : undefined,
+    disabled: disabled,
+    buttonSize: size,
+    appearance: appearanceCheck,
+    ref: innerRef,
+    onClick: onClick,
+    "data-qa-button": title || "",
+    "data-qa-button-isdisabled": disabled === true,
+    "aria-label": ariaLabel
+  }, qa, rest), children);
+};
+
+Button.displayName = "Button";
+export default Button;

package/lib/Button/styles.js

@@ -0,0 +1,48 @@
+import styled, { css } from "styled-components";
+import { COMMON, LAYOUT } from "../utils/system-props";
+import { focusRing, disabled, pill } from "../utils/mixins";
+import Icon from "../Icon/styles";
+var Container = styled.button.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1juy94s-0"
+})(["display:inline-block;box-sizing:border-box;text-align:center;font-family:", ";border:1px solid ", ";border-radius:", ";border-style:", ";background:", ";color:", ";cursor:pointer;text-decoration:none;line-height:16px;white-space:nowrap;font-weight:", ";transition:all ", " linear;margin:0;padding:", ";font-size:", ";&:visited{color:", ";}&:hover{color:", ";background:", ";text-decoration:none;box-shadow:", ";}&:active{color:", ";background:", ";transform:translateY(1px);}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", "{vertical-align:text-bottom;}", " ", ""], function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].border.base;
+}, function (props) {
+  return props.theme.radii[500];
+}, function (props) {
+  return props.appearance === "placeholder" ? "dashed" : "solid";
+}, function (props) {
+  return props.theme.colors.button[props.appearance].background.base;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].text.base;
+}, function (props) {
+  return props.theme.fontWeights.bold;
+}, function (props) {
+  return props.theme.duration.fast;
+}, function (props) {
+  return props.buttonSize === "default" ? "" + props.theme.space[300] : "" + props.theme.space[350];
+}, function (props) {
+  return props.buttonSize === "default" ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].text.base;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].text.hover;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].background.hover;
+}, function (props) {
+  return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
+}, function (props) {
+  return props.theme.colors.button[props.appearance].text.hover;
+}, function (props) {
+  return props.theme.colors.button[props.appearance].background.active;
+}, focusRing, function (props) {
+  return props.active && css(["color:", " !important;background:", " !important;"], props.theme.colors.button[props.appearance].text.hover, props.theme.colors.button[props.appearance].background.active);
+}, function (props) {
+  return props.disabled && disabled;
+}, 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

@@ -14,12 +14,13 @@ import Button from "../Button";
 import Icon from "../Icon";
 import styled from "styled-components";
 import { mergeRefs } from "../utils";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 var InputContext = /*#__PURE__*/React.createContext({});
 var StyledButton = styled(Button).withConfig({
   displayName: "Input__StyledButton",
   componentId: "sc-1ck1dnm-0"
 })(["&:hover,&:active{color:", ";}"], function (props) {
-  return props.theme.utils.interact(props.theme.colors.icon.base);
+  return useInteractiveColor(props.theme.colors.icon.base);
 });
 
 var ClearButton = function ClearButton() {

package/lib/Token/styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "sc-nyn5zy-0"
@@ -8,13 +9,13 @@ var Container = styled.button.withConfig({
   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) {
-  var theme = _ref2.theme,
-      palette = _ref2.palette;
-  return palette === "blue" && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, theme.utils.interact(theme.colors.container.border.decorative.blue));
+  var closeable = _ref2.closeable,
+      theme = _ref2.theme;
+  return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, useInteractiveColor(theme.colors.container.border.base));
 }, function (_ref3) {
-  var closeable = _ref3.closeable,
-      theme = _ref3.theme;
-  return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+  var theme = _ref3.theme,
+      palette = _ref3.palette;
+  return palette === "blue" && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, useInteractiveColor(theme.colors.container.border.decorative.blue));
 }, function (_ref4) {
   var disabled = _ref4.disabled,
       theme = _ref4.theme;
@@ -22,6 +23,6 @@ var Container = styled.button.withConfig({
 }, function (_ref5) {
   var valid = _ref5.valid,
       theme = _ref5.theme;
-  return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, theme.utils.interact(theme.colors.container.border.error));
+  return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, useInteractiveColor(theme.colors.container.border.error));
 }, COMMON);
 export default Container;

package/lib/index.js

@@ -1,6 +1,7 @@
 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";