@sproutsocial/racine 14.0.1 → 14.1.0

package/lib/Input/styles.js

@@ -4,7 +4,7 @@ import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-4stdun-0"
-})(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;line-height:16px;margin:0;padding:", ";font-size:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";}", " ", "}", " ", " ", " ", " ", ""], function (props) {
+})(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;margin:0;padding:", ";font-size:", ";line-height:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";}", " ", "}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.radii[500];
 }, function (props) {
   return props.theme.colors.form.background.base;
@@ -25,7 +25,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   switch (props.size) {
     case 'large':
-      return props.theme.space[400];
+      return "".concat(props.theme.space[350], " ").concat(props.theme.space[400]);
     case 'small':
       return props.theme.space[200];
     case 'default':
@@ -41,6 +41,17 @@ var Container = styled.div.withConfig({
     default:
       return props.theme.typography[200].fontSize;
   }
+}, function (props) {
+  switch (props.size) {
+    case 'large':
+      return props.theme.typography[300].lineHeight;
+
+    /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */
+    case 'small':
+    case 'default':
+    default:
+      return '16px';
+  }
 }, focusRing, function (props) {
   return props.theme.colors.form.placeholder.base;
 }, function (props) {

package/lib/Select/styles.js

@@ -4,7 +4,7 @@ import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-egruk2-0"
-})(["position:relative;box-sizing:border-box;select{box-sizing:border-box;width:100%;border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";cursor:", ";outline:none;appearance:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";margin:0;visibility:visible;padding:", ";font-size:", ";&::-ms-expand{display:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}}@-moz-document url-prefix(){select{line-height:14px;}}", " ", " ", ""], function (props) {
+})(["position:relative;box-sizing:border-box;select{box-sizing:border-box;width:100%;border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";cursor:", ";outline:none;appearance:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";margin:0;visibility:visible;padding:", ";font-size:", ";line-height:", ";&::-ms-expand{display:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}}", " ", " ", ""], function (props) {
   return props.theme.colors.form.border.base;
 }, function (props) {
   return props.theme.radii[500];
@@ -29,7 +29,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   switch (props.size) {
     case 'large':
-      return "".concat(props.theme.space[400], " ").concat(props.theme.space[600], " ").concat(props.theme.space[400], " ").concat(props.theme.space[400]);
+      return "".concat(props.theme.space[350], " ").concat(props.theme.space[600], " ").concat(props.theme.space[350], " ").concat(props.theme.space[400]);
     case 'small':
       return "".concat(props.theme.space[200], " ").concat(props.theme.space[500], " ").concat(props.theme.space[200], " ").concat(props.theme.space[200]);
     case 'default':
@@ -45,6 +45,17 @@ var Container = styled.div.withConfig({
     default:
       return props.theme.typography[200].fontSize;
   }
+}, function (props) {
+  switch (props.size) {
+    case 'large':
+      return props.theme.typography[300].lineHeight;
+
+    /* hardcoded to 'normal' so the large change doesn't impact small/default */
+    case 'small':
+    case 'default':
+    default:
+      return 'normal';
+  }
 }, focusRing, function (props) {
   return props.disabled && css(["opacity:0.4;"]);
 }, function (props) {

package/lib/StatefulStory.js

@@ -0,0 +1,33 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+
+/**
+ * Props for the StatefulStory component.
+ *
+ * This type automatically detects the type of the `initialState` prop and passes it to the `children` when rendered.
+ */
+
+/**
+ * A wrapper component that allows you to pass in an initial state.
+ *
+ * This is useful for adding state inline for stories. Story functions are not intepretted as React components,
+ * so you can't use hooks in them. This component allows you to useState in a story without having to create a
+ * custom component for every story.
+ */
+export function StatefulStory(_ref) {
+  var children = _ref.children,
+    initialState = _ref.initialState;
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  return children({
+    state: state,
+    setState: setState
+  });
+}

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

@@ -85,6 +85,26 @@ export var analytics = {
   }
 };
 export var listening = {
+  chart: {
+    indicator: {
+      default: {
+        primary: baseDarkTheme.colors.neutral[100],
+        secondary: baseDarkTheme.colors.neutral[900]
+      },
+      hover: {
+        primary: baseDarkTheme.colors.neutral[300],
+        secondary: baseDarkTheme.colors.neutral[0]
+      }
+    },
+    spike: {
+      background: {
+        base: baseDarkTheme.colors.teal[500]
+      },
+      icon: {
+        base: baseDarkTheme.colors.neutral[0]
+      }
+    }
+  },
   topicTypes: {
     customTopic: baseDarkTheme.colors.teal[400],
     brandHealth: baseDarkTheme.colors.red[400],

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

@@ -82,6 +82,26 @@ export var analytics = {
   }
 };
 export var listening = {
+  chart: {
+    indicator: {
+      default: {
+        primary: baseLightTheme.colors.neutral[400],
+        secondary: baseLightTheme.colors.neutral[0]
+      },
+      hover: {
+        primary: baseLightTheme.colors.neutral[1000],
+        secondary: baseLightTheme.colors.neutral[0]
+      }
+    },
+    spike: {
+      background: {
+        base: baseLightTheme.colors.teal[500]
+      },
+      icon: {
+        base: baseLightTheme.colors.neutral[0]
+      }
+    }
+  },
   topicTypes: {
     customTopic: baseLightTheme.colors.blue[400],
     brandHealth: baseLightTheme.colors.red[400],

package/lib/utils/system-props/gap.js

@@ -0,0 +1,15 @@
+import { system } from 'styled-system';
+export var gap = system({
+  gap: {
+    property: 'gap',
+    scale: 'space'
+  },
+  rowGap: {
+    property: 'rowGap',
+    scale: 'space'
+  },
+  columnGap: {
+    property: 'columnGap',
+    scale: 'space'
+  }
+});

package/lib/utils/system-props/index.js

@@ -0,0 +1 @@
+export * from "./system-props";

package/lib/utils/{system-props.js → system-props/system-props.js}

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-syntax
 import * as styles from 'styled-system';
+import { gap } from "./gap";
 var typeScale = styles.variant({
   key: 'typography',
   prop: 'typeScale'
@@ -18,5 +19,5 @@ styles.boxShadow);
 export var TYPOGRAPHY = styles.compose(typeScale, styles.fontFamily, styles.fontStyle, styles.fontWeight, styles.lineHeight, styles.textAlign);
 export var LAYOUT = styles.compose(styles.display, styles.size, styles.width, styles.height, styles.minWidth, styles.minHeight, styles.maxWidth, styles.maxHeight, styles.overflow, styles.verticalAlign);
 export var POSITION = styles.compose(styles.position, styles.zIndex, styles.top, styles.right, styles.bottom, styles.left);
-export var FLEXBOX = styles.compose(styles.flexBasis, styles.flexDirection, styles.flexWrap, styles.alignContent, styles.alignItems, styles.justifyContent, styles.justifyItems, styles.order, styles.flex, styles.flexShrink, styles.flexGrow, styles.justifySelf, styles.alignSelf);
+export var FLEXBOX = styles.compose(styles.flexBasis, styles.flexDirection, styles.flexWrap, styles.alignContent, styles.alignItems, styles.justifyContent, styles.justifyItems, styles.order, styles.flex, styles.flexShrink, styles.flexGrow, styles.justifySelf, styles.alignSelf, gap);
 export var GRID = styles.grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "14.0.1",
+  "version": "14.1.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -100,7 +100,6 @@
     "@babel/preset-typescript": "^7.18.6",
     "@changesets/cli": "^2.12.0",
     "@khanacademy/flow-to-ts": "^0.5.2",
-    "@reach/component-component": "^0.1.3",
     "@sproutsocial/seeds-border": "^1.1.0",
     "@sproutsocial/seeds-color": "^1.5.3",
     "@sproutsocial/seeds-depth": "^3.0.0",

package/dist/types/utils/system-props.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"system-props.d.ts","sourceRoot":"","sources":["../../../src/utils/system-props.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAOxC,eAAO,MAAM,MAAM,gBAOlB,CAAC;AAEF,eAAO,MAAM,MAAM,gBAgBlB,CAAC;AAEF,eAAO,MAAM,UAAU,gBAOtB,CAAC;AAEF,eAAO,MAAM,MAAM,gBAWlB,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAOpB,CAAC;AAEF,eAAO,MAAM,OAAO,gBAcnB,CAAC;AAEF,eAAO,MAAM,IAAI,gBAAc,CAAC"}