@sproutsocial/racine 21.1.0 → 22.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 22.1.0
+
+### Minor Changes
+
+- 3ff0f4c: Menu dependencies are now separate packages.
+
+### Patch Changes
+
+- 4f94d34: Fix broken `active` prop on `Menu.Item` component
+
+## 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

package/README.md

@@ -55,7 +55,8 @@ Racine uses [Storybook](https://storybook.js.org) for local development. Please
 Spin up a draft PR immediately for two reasons:
 
 1. We'll cache your build making all subsequent builds super fast
-2. Add the "📦 create test versions" label to your PR to generate a beta version of the package to use for testing in other projects.
+2. Add the "📦 create test versions" label to your PR to generate a snapshot version of the package to use for testing in other projects.
+3. You'll need to be sure to add a changeset or a bot will comment on your PR prompting you to do so before a snapshot can be created.
 
 _Note: the snapshot will post as a comment on the PR once it has been generated._  
 

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,9 @@ 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 _seedsReactIcon = require("@sproutsocial/seeds-react-icon");
 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); }
@@ -15,7 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var Container = _styledComponents.default.button.withConfig({
   displayName: "styles__Container",
   componentId: "sc-17njgx1-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:", ";", ";text-decoration:none;box-shadow:", ";}&:active{color:", ";", ";transform:translateY(1px);}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", "{vertical-align:text-bottom;}", " ", " ", " ", ""], function (props) {
+})(["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:", ";", ";text-decoration:none;box-shadow:", ";}&:active{color:", ";", ";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;
@@ -47,12 +48,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);
+}, _seedsReactIcon.IconContainer, _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);
@@ -130,6 +130,6 @@ var CheckboxContainer = exports.CheckboxContainer = _styledComponents.default.sp
   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/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,9 +7,9 @@ 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 _Button = _interopRequireDefault(require("../Button"));
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _seedsReactUtilities = require("@sproutsocial/seeds-react-utilities");
+var _seedsReactButton = _interopRequireDefault(require("@sproutsocial/seeds-react-button"));
+var _seedsReactIcon = _interopRequireDefault(require("@sproutsocial/seeds-react-icon"));
 var _styles = _interopRequireWildcard(require("./styles"));
 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 +36,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 // regardless of whether it is manually included as elemAfter or automatically included for type="search" Inputs.
 
 var InputContext = /*#__PURE__*/React.createContext({});
-var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
+var StyledButton = (0, _styledComponents.default)(_seedsReactButton.default).withConfig({
   displayName: "Input__StyledButton",
   componentId: "sc-j6ok5s-0"
 })(["&:hover,&:active{color:", ";}"], function (props) {
@@ -73,7 +73,7 @@ var ClearButton = function ClearButton() {
     title: clearButtonLabel || "Clear",
     ariaLabel: clearButtonLabel || "Clear",
     color: "icon.base"
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
+  }, /*#__PURE__*/React.createElement(_seedsReactIcon.default, {
     name: "circle-x-outline",
     "aria-hidden": true
   }));
@@ -218,7 +218,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       }
 
       // Add default elemBefore and elemAfter elements if type is search.
-      var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(_Icon.default, {
+      var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(_seedsReactIcon.default, {
         name: "magnifying-glass-outline",
         "aria-hidden": true,
         color: "icon.base"
@@ -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;