@sproutsocial/racine 7.0.0-beta.0 → 7.0.1

package/lib/Banner/styles.js

@@ -4,6 +4,6 @@ var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "q43dr4-0"
 })(function (props) {
-  return css(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";.Icon{margin-right:", ";min-width:16px;color:", ";}a,button{font-weight:", ";color:", ";font-size:inherit;text-decoration:underline;}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.headline, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors[props.type].border, props.theme.colors[props.type].background, props.theme.space[400], props.theme.colors[props.type].icon, props.theme.fontWeights.semibold, props.theme.colors.text.headline, COMMON, LAYOUT);
+  return css(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";.Icon{align-self:flex-start;margin-top:3px;margin-right:", ";min-width:16px;color:", ";}a,button{font-weight:", ";color:", ";font-size:inherit;text-decoration:underline;}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.headline, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors[props.type].border, props.theme.colors[props.type].background, props.theme.space[400], props.theme.colors[props.type].icon, props.theme.fontWeights.semibold, props.theme.colors.text.headline, COMMON, LAYOUT);
 });
 export default Container;

package/lib/Checkbox/index.js

@@ -7,7 +7,7 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 import * as React from "react";
-import Container, { CheckboxBox, CheckIcon, Input, InputWrapper, LabelText, CheckboxContainer } from "./styles";
+import Container, { CheckboxBox, CheckIcon, PillInput, InputWrapper, LabelText, CheckboxContainer } from "./styles";
 
 var Checkbox = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Checkbox, _React$Component);
@@ -100,7 +100,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         as: label && "label"
       }, rest), /*#__PURE__*/React.createElement(InputWrapper, {
         appearance: appearance
-      }, /*#__PURE__*/React.createElement(Input, _extends({
+      }, /*#__PURE__*/React.createElement(PillInput, _extends({
         type: "checkbox",
         id: id,
         "aria-label": ariaLabel,

package/lib/Checkbox/styles.js

@@ -22,7 +22,7 @@ export var InputWrapper = styled(Box).withConfig({
     return props.theme.duration.fast;
   }, function (props) {
     return props.theme.easing.ease_inout;
-  }, pill, props.theme.colors.background.app, Input, pill);
+  }, pill, props.theme.colors.background.app, PillInput, pill);
 });
 InputWrapper.displayName = "InputWrapper";
 export var CheckboxBox = styled.div.withConfig({
@@ -55,13 +55,13 @@ export var CheckIcon = styled(Icon).withConfig({
   return props.theme.easing.ease_inout;
 });
 CheckIcon.displayName = "CheckIcon";
-export var Input = styled.input.withConfig({
-  displayName: "styles__Input",
+export var PillInput = styled.input.withConfig({
+  displayName: "styles__PillInput",
   componentId: "sc-59uw8o-4"
 })(["position:absolute;top:0;left:0;width:100%;height:100%;margin:0;appearance:none;cursor:", ";border-radius:4px;&::-ms-check{display:none;}&:focus{", "}", " ", " ", ""], function (props) {
   return props.disabled ? "not-allowed" : "pointer";
 }, focusRing, function (props) {
-  return !props.checked && css(["&:hover,&:focus{~ ", "{border-color:", ";background-color:", ";}~ ", " ", "{opacity:", ";color:", ";}}"], CheckboxBox, props.theme.colors.forms.hoverBorderColor, props.theme.colors.background.container, CheckboxBox, CheckIcon, function (props) {
+  return !props.checked && css(["&:hover,&:focus{~ ", " ", "{opacity:", ";color:", ";}}"], CheckboxBox, CheckIcon, function (props) {
     return props.disabled ? 0 : 1;
   }, props.theme.colors.forms.borderColor);
 }, function (props) {
@@ -69,7 +69,7 @@ export var Input = styled.input.withConfig({
 }, function (props) {
   return props.disabled && css(["~ ", "{opacity:0.4;}~ ", " ", "{opacity:", ";}"], CheckboxBox, CheckboxBox, CheckIcon, props.checked ? 1 : 0);
 });
-Input.displayName = "Input";
+PillInput.displayName = "PillInput";
 export var LabelText = styled(Text).withConfig({
   displayName: "styles__LabelText",
   componentId: "sc-59uw8o-5"

package/lib/Collapsible/index.js

@@ -75,7 +75,17 @@ var Panel = function Panel(_ref3) {
         return clearTimeout(timeoutID);
       };
     } else {
-      setIsHidden(!isOpen);
+      // Similar to the close animation, we need to delay setting hidden to run slightly async.
+      // An issue occurs with the initial render isHidden logic that causes the animation to occur sporadically.
+      // using this 0 second timeout just allows this component to initially render with an undefined max height,
+      // Then go directly from undefined to the full max height, without a brief 0 value that triggers an animation
+      var _timeoutID = setTimeout(function () {
+        return setIsHidden(!isOpen);
+      }, 0);
+
+      return function () {
+        return clearTimeout(_timeoutID);
+      };
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(CollapsingBox, _extends({

package/lib/IconViewBoxes.js

@@ -287,6 +287,7 @@ module.exports = {
   "star": "0 0 18 16",
   "sticky-note-outline": "0 0 16 16",
   "sticky-note": "0 0 16 16",
+  "stories": "0 0 16 17",
   "story": "0 0 16 16",
   "suggestions": "0 0 11 16",
   "sun": "0 0 16 16",
@@ -333,6 +334,8 @@ module.exports = {
   "window-regular": "0 0 16 16",
   "window-restore": "0 0 16 16",
   "x": "0 0 16 18",
+  "yelp-full-star": "0 0 16 16",
+  "yelp-half-star": "0 0 16 16",
   "yelp": "0 0 14 16",
   "youtube": "0 0 16 15",
   "zendesk": "0 0 16 16"

package/lib/Link/styles.js

@@ -1,11 +1,11 @@
 import styled, { css } from "styled-components";
 import { focusRing, disabled } from "../utils/mixins";
 import Text from "../Text";
-import { TYPOGRAPHY } from "../utils/system-props";
+import { TYPOGRAPHY, COMMON } from "../utils/system-props";
 var Container = styled(Text).withConfig({
   displayName: "styles__Container",
   componentId: "adcw4a-0"
-})(["border:0;font-family:", ";transition:all ", " ", ";text-decoration:none;appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", ""], function (props) {
+})(["border:0;font-family:", ";transition:all ", " ", ";text-decoration:none;appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.theme.duration.fast;
@@ -25,5 +25,5 @@ var Container = styled(Text).withConfig({
   return !props.href && css(["background:none;"]);
 }, function (props) {
   return props.disabled && disabled;
-}, TYPOGRAPHY);
+}, COMMON, TYPOGRAPHY);
 export default Container;

package/lib/Toast/index.js

@@ -1,11 +1,10 @@
-import _styled3 from "styled-components";
 import _styled2 from "styled-components";
 import _styled from "styled-components";
 
 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 * as React from "react";
-import Container, { GlobalToastStyles } from "./styles";
+import Container, { GlobalToastStyles, CustomIcon } from "./styles";
 import { toast as toastifyToast, ToastContainer as BaseToastContainer, cssTransition } from "react-toastify";
 import { MOTION_DURATION_MEDIUM, MOTION_DURATION_SLOW } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
 import Icon from "../Icon";
@@ -79,14 +78,9 @@ var IconBox = function IconBox(props) {
   }));
 };
 
-var _StyledIcon = _styled(Icon).withConfig({
-  displayName: "Toast___StyledIcon",
-  componentId: "sc-1vii3dq-1"
-})(["transform:translateY(4px);"]);
-
 var _StyledBox2 = _styled(Box).withConfig({
   displayName: "Toast___StyledBox2",
-  componentId: "sc-1vii3dq-2"
+  componentId: "sc-1vii3dq-1"
 })(["transform:translateY(1px);"]);
 
 var Toast = function Toast(_ref) {
@@ -107,10 +101,11 @@ var Toast = function Toast(_ref) {
     alignItems: "flex-start",
     m: "auto",
     width: 1
-  }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(_StyledIcon, {
-    name: theme ? themeIcon[theme] : icon || themeIcon["info"],
+  }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(CustomIcon, {
+    type: theme || "info",
     color: color,
-    mr: 400,
+    customColor: color,
+    name: theme ? themeIcon[theme] : icon || themeIcon["info"],
     fixedWidth: true
   })), /*#__PURE__*/React.createElement(_StyledBox2, {
     flex: 1

package/lib/Toast/styles.js

@@ -3,13 +3,14 @@ var _templateObject;
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import styled, { createGlobalStyle } from "styled-components";
-import Box from "../Box"; // $FlowIssue
+import Box from "../Box";
+import Icon from "../Icon"; // $FlowIssue
 
 import toastStyles from "!!raw-loader!react-toastify/dist/ReactToastify.css";
 var Container = styled(Box).withConfig({
   displayName: "styles__Container",
   componentId: "wp5x29-0"
-})(["display:flex;align-items:center;font-family:", ";", " position:relative;background:", ";border-left:2px solid ", ";.Icon{color:", ";}"], function (p) {
+})(["display:flex;align-items:center;font-family:", ";", " position:relative;background:", ";border-left:2px solid ", ";"], function (p) {
   return p.theme.fontFamily;
 }, function (p) {
   return p.theme.typography[200];
@@ -17,6 +18,12 @@ var Container = styled(Box).withConfig({
   return p.theme.colors.background.container;
 }, function (p) {
   return p.theme.colors[p.type].border;
+});
+export var CustomIcon = styled(Icon).withConfig({
+  displayName: "styles__CustomIcon",
+  componentId: "wp5x29-1"
+})(["margin-right:", ";transform:translateY(4px);color:", ";"], function (props) {
+  return props.theme.space[400];
 }, function (p) {
   return p.customColor ? undefined : p.theme.colors[p.type].icon;
 });