@sproutsocial/racine 21.0.2 → 22.0.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 22.0.0
+
+### Major Changes
+
+- 3c28d7b: - All imports in Racine have been updated to use the new mixins, theme, and utilities packages
+  - Old files remain in place to support pre-existing file drilling
+
+### Patch Changes
+
+- Updated dependencies [9aaaa9c]
+  - @sproutsocial/seeds-react-system-props@2.1.0
+
+## 21.1.0
+
+### Minor Changes
+
+- e254b62: Support passing the scope property to TableCell
+
+### Patch Changes
+
+- e254b62: Network colors for `trustpilot` ratings have been added as `trustpilot_0_star` (or the applicable rating from 0-5)
+- e254b62: Round up inner Collapsible box height measurement
+- Updated dependencies [e254b62]
+  - @sproutsocial/seeds-networkcolor@2.15.1
+
 ## 21.0.2
 
 ### Patch Changes

package/__flow__/TableCell/TableCell.flow.js

@@ -13,6 +13,8 @@ export type TypeTableCellProps = {
   width?: number,
   /** Controls the CSS text-align property (optional) */
   align?: "left" | "right" | "center" | "justify",
+  /** Controls the scope attribute. If set, will change the element from a <td> to a <th>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope (optional)  */
+  scope?: "row" | "col" | "rowGroup" | "colGroup",
   /** Children to be rendered */
   children?: React.Node,
   ...

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

@@ -335,6 +335,12 @@ type TypeNetworkColors = {|
     tiktok: string,
     threads: string,
     trustpilot: string,
+    trustpilot_0_star: string,
+    trustpilot_1_star: string,
+    trustpilot_2_star: string,
+    trustpilot_3_star: string,
+    trustpilot_4_star: string,
+    trustpilot_5_star: string,
     ...
   }
 |};

package/commonjs/Badge/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _themeGet = require("@styled-system/theme-get");
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Container = _styledComponents.default.span.withConfig({
@@ -22,5 +22,5 @@ var Container = _styledComponents.default.span.withConfig({
   return p.type ? (0, _themeGet.themeGet)(_constants.legacyBadgeColors[p.type].background) : p.theme.colors.container.background.decorative[p.badgeColor];
 }, function (p) {
   return p.size === "small" ? "".concat(p.theme.space[0], " ").concat(p.theme.space[200]) : "".concat(p.theme.space[300]);
-}, _systemProps.COMMON);
+}, _seedsReactSystemProps.COMMON);
 var _default = exports.default = Container;

package/commonjs/Banner/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.StyledBannerIcon = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -15,7 +15,7 @@ var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-r8d7e5-0"
 })(function (props) {
-  return (0, _styledComponents.css)(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";a,button{font-weight:", ";color:", ";font-size:inherit;&:hover{color:", ";text-decoration:underline;}}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.body, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors.container.border[props.type], props.theme.colors.container.background[props.type], props.theme.fontWeights.semibold, props.theme.colors.text.body, props.theme.colors.text.body, _systemProps.COMMON, _systemProps.LAYOUT);
+  return (0, _styledComponents.css)(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";a,button{font-weight:", ";color:", ";font-size:inherit;&:hover{color:", ";text-decoration:underline;}}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.body, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors.container.border[props.type], props.theme.colors.container.background[props.type], props.theme.fontWeights.semibold, props.theme.colors.text.body, props.theme.colors.text.body, _seedsReactSystemProps.COMMON, _seedsReactSystemProps.LAYOUT);
 });
 var _default = exports.default = Container;
 var StyledBannerIcon = exports.StyledBannerIcon = (0, _styledComponents.default)(_Icon.default).withConfig({

package/commonjs/Box/styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
@@ -13,5 +13,5 @@ var Container = _styledComponents.default.div.withConfig({
 })(["box-sizing:border-box;font-family:", ";", " ", " ", " ", " ", " ", ""], function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
-}, _systemProps.COMMON, _systemProps.BORDER, _systemProps.LAYOUT, _systemProps.POSITION, _systemProps.FLEXBOX, _systemProps.GRID);
+}, _seedsReactSystemProps.COMMON, _seedsReactSystemProps.BORDER, _seedsReactSystemProps.LAYOUT, _seedsReactSystemProps.POSITION, _seedsReactSystemProps.FLEXBOX, _seedsReactSystemProps.GRID);
 var _default = exports.default = Container;

package/commonjs/Button/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _systemProps = require("../utils/system-props");
-var _mixins = require("../utils/mixins");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 var _styles = _interopRequireDefault(require("../Icon/styles"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -47,12 +47,12 @@ var Container = _styledComponents.default.button.withConfig({
   return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {
   return props.appearance !== "unstyled" && "background: ".concat(props.theme.colors.button[props.appearance].background.active);
-}, _mixins.focusRing, function (props) {
+}, _seedsReactMixins.focusRing, function (props) {
   return props.active && (0, _styledComponents.css)(["color:", " !important;", ";"], props.theme.colors.button[props.appearance].text.hover, props.appearance !== "unstyled" && "background: ".concat(props.theme.colors.button[props.appearance].background.active, " !important"));
 }, function (props) {
-  return props.disabled && _mixins.disabled;
+  return props.disabled && _seedsReactMixins.disabled;
 }, function (props) {
-  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;background-color:transparent;", " &:focus:active,&:hover{background-color:transparent;box-shadow:inset 0px 0px 0px 1px ", ";}"], _mixins.pill, props.theme.colors.button.pill.border.hover);
-}, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON, _systemProps.FLEXBOX, _systemProps.GRID);
+  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;background-color:transparent;", " &:focus:active,&:hover{background-color:transparent;box-shadow:inset 0px 0px 0px 1px ", ";}"], _seedsReactMixins.pill, props.theme.colors.button.pill.border.hover);
+}, _styles.default, _seedsReactSystemProps.LAYOUT, _seedsReactSystemProps.COMMON, _seedsReactSystemProps.FLEXBOX, _seedsReactSystemProps.GRID);
 Container.displayName = "Button-Container";
 var _default = exports.default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/commonjs/Card/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledSelectedIcon = exports.StyledCardLink = exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardContent = exports.StyledCardAffordance = exports.StyledCard = exports.SelectedIconWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
-var _mixins = require("../utils/mixins");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // TODO: Would be really cool to cherry pick specific props from style functions. For example,
@@ -111,10 +111,10 @@ var StyledCard = exports.StyledCard = _styledComponents.default.div.withConfig({
   return theme.shadows[$elevation];
 }, function (_ref20) {
   var $isRoleLink = _ref20.$isRoleLink;
-  return $isRoleLink ? _mixins.focusRing : null;
-}, StyledCardLink, _mixins.focusRing, function (_ref21) {
+  return $isRoleLink ? _seedsReactMixins.focusRing : null;
+}, StyledCardLink, _seedsReactMixins.focusRing, function (_ref21) {
   var $disabled = _ref21.$disabled;
-  return $disabled && "\n    ".concat(_mixins.disabled, "\n  ");
+  return $disabled && "\n    ".concat(_seedsReactMixins.disabled, "\n  ");
 }, function (_ref22) {
   var $selected = _ref22.$selected,
     theme = _ref22.theme;

package/commonjs/Card/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.onKeyDown = exports.navigateTo = exports.SubComponentContext = void 0;
 exports.useChildContext = useChildContext;
 var _react = require("react");
-var _utils = require("../utils");
+var _seedsReactUtilities = require("@sproutsocial/seeds-react-utilities");
 var SubComponentContext = exports.SubComponentContext = /*#__PURE__*/(0, _react.createContext)({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   setHasSubComponent: function setHasSubComponent() {},
@@ -26,7 +26,7 @@ var navigateTo = exports.navigateTo = function navigateTo(_ref) {
   var target = e.target;
 
   // asserts that target is an element so `contains` accepts it
-  (0, _utils.assertIsElement)(target);
+  (0, _seedsReactUtilities.assertIsElement)(target);
   if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) {
     if (target.getAttribute("onclick") !== null || target.getAttribute("href") !== null) {
       e.stopPropagation();

package/commonjs/CharacterCounter/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var Container = _styledComponents.default.div.withConfig({
@@ -22,5 +22,5 @@ var Container = _styledComponents.default.div.withConfig({
   return props.overlimit ? props.theme.colors.text.error : props.theme.colors.text.subtext;
 }, function (p) {
   return p.mini && (0, _styledComponents.css)(["", ""], p.theme.typography[100]);
-}, _systemProps.COMMON);
+}, _seedsReactSystemProps.COMMON);
 var _default = exports.default = Container;

package/commonjs/ChartLegend/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Swatch = exports.Label = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var Label = exports.Label = _styledComponents.default.span.withConfig({
@@ -24,7 +24,7 @@ var Swatch = exports.Swatch = _styledComponents.default.span.withConfig({
   return props.theme.space[350];
 }, function (props) {
   return props.theme.space[350];
-}, _systemProps.COMMON);
+}, _seedsReactSystemProps.COMMON);
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-4jc00i-2"
@@ -32,7 +32,7 @@ var Container = _styledComponents.default.div.withConfig({
   return props.inline && (0, _styledComponents.css)(["display:flex;justify-content:center;", " + ", "{margin-left:", ";}"], Label, Label, function (props) {
     return props.theme.space[450];
   });
-}, _systemProps.COMMON, _systemProps.LAYOUT);
+}, _seedsReactSystemProps.COMMON, _seedsReactSystemProps.LAYOUT);
 Label.displayName = "ChartLegendLabel";
 Swatch.displayName = "ChartLegendSwatch";
 var _default = exports.default = Container;

package/commonjs/Checkbox/styles.js

@@ -8,8 +8,8 @@ exports.default = exports.PillInput = exports.LabelText = exports.InputWrapper =
 var React = _interopRequireWildcard(require("react"));
 var _server = require("react-dom/server");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _mixins = require("../utils/mixins");
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Text = _interopRequireDefault(require("../Text"));
@@ -19,7 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var Container = _styledComponents.default.span.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1hcgibh-0"
-})(["display:inline-flex;align-items:center;box-sizing:border-box;", ""], _systemProps.COMMON);
+})(["display:inline-flex;align-items:center;box-sizing:border-box;", ""], _seedsReactSystemProps.COMMON);
 Container.displayName = "Checkbox";
 var InputWrapper = exports.InputWrapper = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__InputWrapper",
@@ -33,7 +33,7 @@ var InputWrapper = exports.InputWrapper = (0, _styledComponents.default)(_Box.de
     return props.theme.duration.fast;
   }, function (props) {
     return props.theme.easing.ease_inout;
-  }, props.theme.mode === "dark" ? "screen" : "multiply", _mixins.pill, props.theme.colors.app.background.base, PillInput, _mixins.pill);
+  }, props.theme.mode === "dark" ? "screen" : "multiply", _seedsReactMixins.pill, props.theme.colors.app.background.base, PillInput, _seedsReactMixins.pill);
 });
 InputWrapper.displayName = "InputWrapper";
 var CheckboxBox = exports.CheckboxBox = _styledComponents.default.div.withConfig({
@@ -72,7 +72,7 @@ var PillInput = exports.PillInput = _styledComponents.default.input.withConfig({
   componentId: "sc-1hcgibh-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";
-}, _mixins.focusRing, function (props) {
+}, _seedsReactMixins.focusRing, function (props) {
   return !props.checked && (0, _styledComponents.css)(["&:hover,&:focus{~ ", " ", "{opacity:", ";color:", ";}}"], CheckboxBox, CheckIcon, props.disabled ? 0 : 1, props.theme.colors.form.border.base);
 }, function (props) {
   return props.checked && (0, _styledComponents.css)(["~ ", "{border-color:", ";background-color:", ";}~ ", " ", "{opacity:1;color:", ";}"], CheckboxBox, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, CheckboxBox, CheckIcon, props.theme.colors.icon.inverse);
@@ -125,10 +125,11 @@ var getIcon = function getIcon(type, color) {
   var icon = type === "indeterminate" ? indeterminateSVG(escapedColor) : checkSVG(escapedColor);
   return icon;
 };
+/* stylelint-disable eslint-disable */
 var CheckboxContainer = exports.CheckboxContainer = _styledComponents.default.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-1hcgibh-6"
 })(function (props) {
-  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, (0, _server.renderToStaticMarkup)(getIcon(props.indeterminate ? "indeterminate" : "check", props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? "not-allowed" : "pointer", !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.form.border.base, props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
+  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, (0, _server.renderToStaticMarkup)(getIcon(props.indeterminate ? "indeterminate" : "check", props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? "not-allowed" : "pointer", !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.form.border.base, props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _seedsReactMixins.focusRing, _seedsReactSystemProps.COMMON);
 });
 var _default = exports.default = Container;

package/commonjs/Collapsible/Collapsible.js

@@ -92,7 +92,9 @@ var Panel = function Panel(_ref3) {
     _useState4 = _slicedToArray(_useState3, 2),
     isHidden = _useState4[0],
     setIsHidden = _useState4[1];
-  var maxHeight = determineMaxHeight(isHidden, openHeight, measurement.height + offset);
+  var maxHeight = determineMaxHeight(isHidden, openHeight,
+  // Round up to the nearest pixel to prevent subpixel rendering issues
+  Math.ceil(measurement.height + offset));
 
   /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it interferes with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
   (0, _react.useEffect)(function () {

package/commonjs/DatePicker/styles.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ReactDatesCssOverrides = exports.CalendarDay = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _moment = _interopRequireDefault(require("moment"));
-var _mixins = require("../utils/mixins");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 var _Box = _interopRequireDefault(require("../Box"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -63,7 +63,7 @@ var CalendarDay = exports.CalendarDay = (0, _styledComponents.default)(_Box.defa
   if (isHoveredAndInRange(modifiers)) {
     return (0, _styledComponents.css)(["margin:0 ", ";border-radius:", ";border:1px solid ", ";"], theme.space[200], theme.radii.pill, theme.colors.container.border.selected);
   } else if (isOutOfRange(modifiers)) {
-    return (0, _styledComponents.css)(["color:", ";", ";"], theme.colors.text.subtext, _mixins.disabled);
+    return (0, _styledComponents.css)(["color:", ";", ";"], theme.colors.text.subtext, _seedsReactMixins.disabled);
   }
 });
 var ReactDatesCssOverrides = exports.ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)([".DayPicker{box-sizing:content-box;font-weight:", ";font-family:", ";&_transitionContainer{height:228px !important;}&_weekHeader{color:", ";border-bottom:1px solid ", ";top:26px;width:230px;&_ul{padding-left:10px;}}&_weekHeaders__horizontal{margin-left:0}&_weekHeader_li{", " color:", ";font-weight:", ";margin:0;}&__horizontal{box-shadow:none;background:", ";}}.CalendarDay{background-color:transparent;&__selected,&__selected_span,&:hover{background-color:transparent;}&__default{color:", ";}&__default,&__default:hover{border:none;color:", ";}}.CalendarMonth{", " background:", ";padding:0 15px;&_caption{", " color:", ";padding-top:0;background:", ";strong{font-weight:", ";}}&_table{line-height:21.333px;tr{vertical-align:middle;}td{padding:0;border-bottom:none;}}}.CalendarMonthGrid{background:", ";}.DayPickerNavigation_button__horizontal{color:", ";top:-4px;padding:7px 8px;position:absolute;line-height:0.78;border-radius:9999px;border:none;background:", ";&:nth-child(1){left:22px;}&:nth-child(2){right:22px;}&:hover{background:", ";}}"], function (_ref2) {

package/commonjs/Drawer/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Content = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 var _Box = _interopRequireDefault(require("../Box"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -26,5 +26,5 @@ var Container = _styledComponents.default.div.withConfig({
   return props.theme.shadows.high;
 }, function (props) {
   return (0, _styledComponents.css)(["", ":", "px;"], props.direction, props.offset);
-}, _systemProps.COMMON);
+}, _seedsReactSystemProps.COMMON);
 var _default = exports.default = Container;

package/commonjs/FormField/FormField.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _hooks = require("../utils/hooks");
+var _seedsReactHooks = require("@sproutsocial/seeds-react-hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Label = _interopRequireDefault(require("../Label"));
 var _Text = _interopRequireDefault(require("../Text"));
@@ -49,8 +49,8 @@ var FormField = function FormField(_ref) {
     _useState2 = _slicedToArray(_useState, 1),
     id = _useState2[0];
   var errorId = "Error-".concat(id);
-  var containerText = (0, _hooks.useTextContent)("");
-  var errorContainerText = (0, _hooks.useTextContent)("");
+  var containerText = (0, _seedsReactHooks.useTextContent)("");
+  var errorContainerText = (0, _seedsReactHooks.useTextContent)("");
   return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({}, rest, qa, {
     mb: mb,
     "data-qa-formfield": qa && qa["data-qa-formfield"] || id || containerText.current,

package/commonjs/Icon/styles.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var sizes = {
@@ -29,5 +29,5 @@ var Container = _styledComponents.default.span.attrs({
   componentId: "sc-1v500hw-0"
 })(["display:inline-block;color:inherit;vertical-align:middle;", " ", " ", ""], function (props) {
   return stylesForSize(sizes[props.iconSize], props.fixedWidth);
-}, _systemProps.COMMON, _styledSystem.verticalAlign);
+}, _seedsReactSystemProps.COMMON, _styledSystem.verticalAlign);
 var _default = exports.default = Container;

package/commonjs/Image/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ImageContainer = _styledComponents.default.img.attrs({
@@ -16,5 +16,5 @@ var ImageContainer = _styledComponents.default.img.attrs({
   componentId: "sc-dngsi7-0"
 })(["display:block;", " ", " ", ""], function (props) {
   return props.isLoading && (0, _styledComponents.css)(["visibility:hidden;"]);
-}, _systemProps.COMMON, _systemProps.LAYOUT);
+}, _seedsReactSystemProps.COMMON, _seedsReactSystemProps.LAYOUT);
 var _default = exports.default = ImageContainer;

package/commonjs/Indicator/styles.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _mixins = require("../utils/mixins");
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Container = _styledComponents.default.span.attrs({
   className: "Indicator"
@@ -20,5 +20,5 @@ var Container = _styledComponents.default.span.attrs({
 }, function (props) {
   var _props$color;
   return (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : props.theme.colors.icon.info;
-}, _mixins.visuallyHidden, _systemProps.COMMON);
+}, _seedsReactMixins.visuallyHidden, _seedsReactSystemProps.COMMON);
 var _default = exports.default = Container;

package/commonjs/Input/Input.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _useInteractiveColor = require("../utils/useInteractiveColor");
-var _utils = require("../utils");
+var _seedsReactUtilities = require("@sproutsocial/seeds-react-utilities");
 var _Button = _interopRequireDefault(require("../Button"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _styles = _interopRequireWildcard(require("./styles"));
@@ -264,7 +264,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
         onKeyDown: this.handleKeyDown,
         onKeyUp: this.handleKeyUp,
         onPaste: this.handlePaste,
-        ref: (0, _utils.mergeRefs)([innerRef !== null && innerRef !== void 0 ? innerRef : null, this.inputRef]),
+        ref: (0, _seedsReactUtilities.mergeRefs)([innerRef !== null && innerRef !== void 0 ? innerRef : null, this.inputRef]),
         "data-qa-input": name || "",
         "data-qa-input-isdisabled": disabled === true,
         "data-qa-input-isrequired": required === true

package/commonjs/Input/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Accessory = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _mixins = require("../utils/mixins");
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var Container = _styledComponents.default.div.withConfig({
@@ -61,7 +61,7 @@ var Container = _styledComponents.default.div.withConfig({
     default:
       return "16px";
   }
-}, _mixins.focusRing, function (props) {
+}, _seedsReactMixins.focusRing, function (props) {
   return props.theme.colors.form.placeholder.base;
 }, function (props) {
   return props.hasBeforeElement && (0, _styledComponents.css)(["padding-left:40px;"]);
@@ -81,7 +81,7 @@ var Container = _styledComponents.default.div.withConfig({
   return props.warning && (0, _styledComponents.css)(["input{border-color:", ";}"], function (props) {
     return props.theme.colors.form.border.warning;
   });
-}, _systemProps.COMMON);
+}, _seedsReactSystemProps.COMMON);
 var Accessory = exports.Accessory = _styledComponents.default.div.withConfig({
   displayName: "styles__Accessory",
   componentId: "sc-4stdun-1"

package/commonjs/KeyboardKey/styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
@@ -22,5 +22,5 @@ var Container = _styledComponents.default.div.withConfig({
   return props.theme.shadows.low;
 }, function (props) {
   return props.theme.space[200];
-}, _systemProps.COMMON);
+}, _seedsReactSystemProps.COMMON);
 var _default = exports.default = Container;

package/commonjs/Link/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _mixins = require("../utils/mixins");
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 var _Text = _interopRequireDefault(require("../Text"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -29,9 +29,9 @@ var Container = (0, _styledComponents.default)(_Text.default).withConfig({
   return props.theme.colors.link.hover;
 }, function (props) {
   return props.theme.colors.link.hover;
-}, _mixins.focusRing, function (props) {
+}, _seedsReactMixins.focusRing, function (props) {
   return !props.href && (0, _styledComponents.css)(["background:none;"]);
 }, function (props) {
-  return props.disabled && _mixins.disabled;
-}, _systemProps.COMMON, _systemProps.TYPOGRAPHY, _systemProps.FLEXBOX);
+  return props.disabled && _seedsReactMixins.disabled;
+}, _seedsReactSystemProps.COMMON, _seedsReactSystemProps.TYPOGRAPHY, _seedsReactSystemProps.FLEXBOX);
 var _default = exports.default = Container;

package/commonjs/Loader/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Text = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _mixins = require("../utils/mixins");
-var _systemProps = require("../utils/system-props");
+var _seedsReactSystemProps = require("@sproutsocial/seeds-react-system-props");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var getSize = function getSize(size) {
@@ -34,9 +34,9 @@ var Container = _styledComponents.default.div.attrs({
   return props.delay ? (0, _styledComponents.css)(["", " 2.25s infinite linear,", " 2s 1"], spin, delayAnimation) : (0, _styledComponents.css)(["", " 2.25s infinite linear"], spin);
 }, function (props) {
   return props.small ? getSize(20) : getSize(40);
-}, _systemProps.COMMON);
+}, _seedsReactSystemProps.COMMON);
 var Text = exports.Text = _styledComponents.default.div.withConfig({
   displayName: "styles__Text",
   componentId: "sc-1edimrk-1"
-})(["", ""], _mixins.visuallyHidden);
+})(["", ""], _seedsReactMixins.visuallyHidden);
 var _default = exports.default = Container;

package/commonjs/Menu/Menu.js

@@ -9,9 +9,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
-var _hooks = require("../utils/hooks");
+var _seedsReactHooks = require("@sproutsocial/seeds-react-hooks");
 var _innerText = _interopRequireDefault(require("../utils/innerText"));
-var _mixins = require("../utils/mixins");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
@@ -104,7 +104,7 @@ var MenuItem = exports.MenuItem = function MenuItem(_ref) {
   var id = (0, _react.useMemo)(function () {
     return idProp || (0, _lodash.default)("MenuItem-");
   }, [idProp]);
-  var textContent = (0, _hooks.useTextContent)("");
+  var textContent = (0, _seedsReactHooks.useTextContent)("");
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   var label = labelProp || textContent.current;
@@ -335,7 +335,7 @@ var MenuGroup = exports.MenuGroup = function MenuGroup(_ref6) {
     role: "presentation",
     fontSize: 200,
     forwardedAs: titleAs || "li",
-    $_css: isDisabled ? _mixins.disabled : undefined
+    $_css: isDisabled ? _seedsReactMixins.disabled : undefined
   }, title), children));
 };
 var MenuDivider = exports.MenuDivider = function MenuDivider(props) {

package/commonjs/Menu/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuItemsContainer = exports.MenuItemContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _mixins = require("../utils/mixins");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 var _Box = _interopRequireDefault(require("../Box"));
 var _styles = require("../Switch/styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,9 +54,9 @@ var MenuItemContainer = exports.MenuItemContainer = (0, _styledComponents.defaul
 }, function (props) {
   return props.interactive && !props.disabled ? (0, _styledComponents.css)(["&:hover{cursor:pointer;}"]) : (0, _styledComponents.css)(["&:hover{cursor:default;}"]);
 }, function (props) {
-  return props.disabled && _mixins.disabled;
+  return props.disabled && _seedsReactMixins.disabled;
 });
 var MenuItemsContainer = exports.MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "sc-168zlb1-1"
-})(["list-style-type:none;&:focus{", "}& > div[role=\"group\"]:first-of-type{border-top:none;}"], _mixins.focusRing);
+})(["list-style-type:none;&:focus{", "}& > div[role=\"group\"]:first-of-type{border-top:none;}"], _seedsReactMixins.focusRing);

package/commonjs/Message/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.MessageMeta = exports.MessageHeader = exports.MessageFooter = exports.MessageBody = void 0;
 var _react = require("react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _mixins = require("../utils/mixins");
+var _seedsReactMixins = require("@sproutsocial/seeds-react-mixins");
 var _Box = _interopRequireDefault(require("../Box"));
 var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,7 +19,7 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
   return props.theme.borderWidths[500];
 }, function (props) {
   return props.theme.colors[props.bg];
-}, _mixins.focusRing);
+}, _seedsReactMixins.focusRing);
 Container.displayName = "Message.Container";
 var MessageHeader = exports.MessageHeader = /*#__PURE__*/(0, _react.memo)((0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageHeader",
@@ -125,5 +125,5 @@ var MessageMeta = exports.MessageMeta = (0, _styledComponents.default)(_Box.defa
   return props.onClick ? "pointer" : "default";
 }, function (props) {
   return props.theme.colors.text.subtext;
-}, _mixins.focusRing);
+}, _seedsReactMixins.focusRing);
 var _default = exports.default = Container;