@sproutsocial/racine 21.1.0 → 22.0.0

package/lib/Modal/styles.js

@@ -6,7 +6,7 @@ import React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { width, zIndex } from "styled-system";
 import ReactModal from "react-modal";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
 import Box from "../Box";
 
 // This is the max space allowed between the modal and the edge of the browser

package/lib/PartnerLogo/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import { verticalAlign } from "styled-system";
-import { COMMON, FLEXBOX } from "../utils/system-props";
+import { COMMON, FLEXBOX } from "@sproutsocial/seeds-react-system-props";
 var sizes = {
   mini: "12px",
   small: "16px",

package/lib/Popout/Popout.js

@@ -22,7 +22,7 @@ import { useTransition, animated } from "react-spring";
 import FocusLock from "react-focus-lock";
 import { Popper } from "react-popper";
 import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
-import { useMutationObserver } from "../utils/hooks";
+import { useMutationObserver } from "@sproutsocial/seeds-react-hooks";
 import Portal from "../Portal";
 import Box from "../Box";
 import { TargetWrapper } from "./styles";

package/lib/Popout/styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { COMMON, LAYOUT } from "../utils/system-props";
+import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
 export var TargetWrapper = styled.div.withConfig({
   displayName: "styles__TargetWrapper",
   componentId: "sc-pftzv7-0"

package/lib/Portal/Portal.js

@@ -14,7 +14,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from "react";
 import { createPortal } from "react-dom";
-import { canUseDOM } from "../utils";
+import { canUseDOM } from "@sproutsocial/seeds-react-utilities";
 var Portal = /*#__PURE__*/function (_React$Component) {
   _inherits(Portal, _React$Component);
   function Portal(props) {

package/lib/Radio/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
-import { focusRing, disabled } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { focusRing, disabled } from "@sproutsocial/seeds-react-mixins";
 import Text from "../Text";
 var Container = styled.span.withConfig({
   displayName: "styles__Container",

package/lib/SegmentedControl/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { visuallyHidden, focusRing, disabled } from "../utils/mixins";
+import { visuallyHidden, focusRing, disabled } from "@sproutsocial/seeds-react-mixins";
 import Box from "../Box";
 import Text from "../Text";
 export var SegmentedControlContainer = styled(Box).withConfig({

package/lib/Select/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
-import { focusRing } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-egruk2-0"

package/lib/Switch/styles.js

@@ -1,5 +1,5 @@
 import styled, { keyframes } from "styled-components";
-import { focusRing } from "../utils/mixins";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
 import { color, layout, space } from "styled-system";
 var loadingKeyFrame = keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
 export var StyledSwitchButton = styled.button.withConfig({

package/lib/Table/styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
 var Container = styled.table.withConfig({
   displayName: "styles__Container",
   componentId: "sc-ddi9em-0"

package/lib/TableCell/styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
 var Container = styled.td.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1k0c6fx-0"

package/lib/TableHeaderCell/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
 var Container = styled.th.withConfig({
   displayName: "styles__Container",
   componentId: "sc-fjeapu-0"

package/lib/TableRowAccordion/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
 var Container = styled.tbody.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1s8pba9-0"

package/lib/Tabs/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
 import Button from "../Button";
 var Container = styled.ul.withConfig({
   displayName: "styles__Container",

package/lib/Text/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { COMMON, LAYOUT, FLEXBOX, GRID, TYPOGRAPHY } from "../utils/system-props";
+import { COMMON, LAYOUT, FLEXBOX, GRID, TYPOGRAPHY } from "@sproutsocial/seeds-react-system-props";
 var Container = styled.span.withConfig({
   displayName: "styles__Container",
   componentId: "sc-99cuku-0"

package/lib/Textarea/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
-import { focusRing } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-12lw4hd-0"

package/lib/ThemeProvider/index.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { ThemeProvider as BaseThemeProvider } from "styled-components";
-import theme from "../themes/light/theme";
+import { theme } from "@sproutsocial/seeds-react-theme";
 
 // We can append additional themes types here
 

package/lib/ToggleHint/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
-import { visuallyHidden } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-10oduzm-0"

package/lib/Token/Token.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from "react";
-import { useTextContent } from "../utils/hooks";
+import { useTextContent } from "@sproutsocial/seeds-react-hooks";
 import Box from "../Box";
 import Icon from "../Icon";
 import { VisuallyHidden } from "../VisuallyHidden";

package/lib/Token/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
-import { focusRing } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
 import { useInteractiveColor } from "../utils/useInteractiveColor";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",

package/lib/TokenInput/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
-import { focusRing } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-18dw7or-0"

package/lib/VisuallyHidden/VisuallyHidden.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { visuallyHidden } from "../utils/mixins";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
 export var VisuallyHidden = styled.span.withConfig({
   displayName: "VisuallyHidden",
   componentId: "sc-19792f6-0"

package/lib/index.js

@@ -5,22 +5,18 @@ export { LogoNamesWithoutVariants as PartnerLogoNames } from "@sproutsocial/seed
 
 /* Theme and related types */
 export * from "./systemProps";
-export { default as theme } from "./themes/light/theme";
-export { default as darkTheme } from "./themes/dark/theme";
-export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
-export { default as ThemeProvider } from "./ThemeProvider";
+export * from "@sproutsocial/seeds-react-theme";
+export { default as ThemeProvider } from "@sproutsocial/seeds-react-theme-provider";
 
 /* Utilities and related types */
-export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
-export { useInteractiveColor } from "./utils/useInteractiveColor";
-export { useMeasure } from "./utils/use-measure";
+export { useSelect, useMultiselect, useTextContent, useMeasure, useInteractiveColor } from "@sproutsocial/seeds-react-hooks";
+export * from "@sproutsocial/seeds-react-mixins";
 
 /* Components */
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./Banner";
-export * from "./Box";
+export * from "@sproutsocial/seeds-react-box";
 export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./Card";

package/lib/types/index.js

@@ -1,5 +1,4 @@
 export * from "./shared";
 export * from "./styled-components";
 export * from "./system-props";
-export * from "./theme";
-export * from "./theme.colors";
+export * from "@sproutsocial/seeds-react-theme";

package/lib/utils/hooks.js

@@ -13,7 +13,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
-import { canUseDOM } from "./";
+import { canUseDOM } from "@sproutsocial/seeds-react-utilities";
 export function useTextContent(initial) {
   var _useState = useState(initial),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/utils/mixins.js

@@ -1,6 +1,6 @@
 import { transparentize } from "polished";
 import { css } from "styled-components";
-import theme from "../themes/light/theme";
+import { theme } from "@sproutsocial/seeds-react-theme";
 export var svgToDataURL = function svgToDataURL(svgStr) {
   var encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");
   var header = "data:image/svg+xml,";

package/lib/utils/react-testing-library.js

@@ -10,7 +10,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { act, cleanup, createEvent, fireEvent, queries, render, screen as defaultScreen, waitFor, waitForElementToBeRemoved, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import ThemeProvider from "../ThemeProvider";
-import { a11yCheck } from "./a11yTest";
+import { a11yCheck } from "@sproutsocial/seeds-react-utilities";
 import { dataQaLabelQueries } from "./dataQaLabelQueries";
 var sproutQueries = _objectSpread(_objectSpread({}, queries), dataQaLabelQueries);
 

package/lib/utils/responsiveProps/index.js

@@ -5,7 +5,7 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import theme from "../../themes/light/theme";
+import { theme } from "@sproutsocial/seeds-react-theme";
 var breakpoints = theme.breakpoints;
 var LENGTH = breakpoints.length + 1;
 export var normalizeResponsiveProp = function normalizeResponsiveProp(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "21.1.0",
+  "version": "22.0.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -100,6 +100,13 @@
     "@sproutsocial/seeds-space": "*",
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-typography": "*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-hooks": "*",
+    "@sproutsocial/seeds-react-mixins": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-theme-provider": "*",
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-utilities": "*",
     "@storybook/addon-a11y": "^7.0.0",
     "@storybook/addon-actions": "^7.0.0",
     "@storybook/addon-essentials": "^7.0.0",
@@ -155,6 +162,7 @@
     "jsdom": "^22.1.0",
     "json-to-scss": "^1.6.2",
     "moment": "^2.29.4",
+    "mkdirp": "1.0.4",
     "npm-run-all": "^4.1.2",
     "outdent": "^0.7.0",
     "pify": "^4.0.1",
@@ -186,6 +194,13 @@
     "@sproutsocial/seeds-typography": ">=2.0.0",
     "@sproutsocial/seeds-partner-logos": ">=1.5.0",
     "@sproutsocial/seeds-illustrations": ">=1.3.0",
+    "@sproutsocial/seeds-react-box": "^1.0.0",
+    "@sproutsocial/seeds-react-hooks": "^2.0.0",
+    "@sproutsocial/seeds-react-mixins": "^2.0.0",
+    "@sproutsocial/seeds-react-system-props": "^2.0.0",
+    "@sproutsocial/seeds-react-theme-provider": "^1.0.0",
+    "@sproutsocial/seeds-react-theme": "^1.0.0",
+    "@sproutsocial/seeds-react-utilities": "^2.0.0",
     "moment": "^2.29.4",
     "prop-types": "^15.0.0",
     "react": "^16.8.0 || ^17.0.0",

package/dist/themes/dark/_themed.scss

@@ -1,119 +0,0 @@
-// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
-// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
-
-// SET-UP
-// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
-@import "./theme.scss";
-
-// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
-// so we need to map-get "default" to access it.
-$theme: map-get($theme, "default");
-
-// FUNCTIONS
-// This function will allow you to get any value from the theme.
-// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
-@function t($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, $keys);
-}
-
-// The rest of the functions are convenience methods to get theme values for subsets of the theme.
-// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
-@function colors($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("colors", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
-@function typography($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("typography", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
-@function fontWeights($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("fontWeights", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
-@function space($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("space", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
-@function radii($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("radii", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
-@function borders($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("borders", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
-@function borderWidths($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("borderWidths", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
-@function shadows($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("shadows", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
-@function easing($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("easing", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
-@function duration($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("duration", $keys));
-}
-
-// UTILITIES
-// Helper functions that power the functions above. Not relevant to the theme.
-// If you import this file with @use, these functions will be excluded because they are private.
-
-// Via https://stackoverflow.com/a/42295154
-// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
-// Only works with a single-character separator.
-@function _str-split($string, $separator) {
-  // empty array/list
-  $split-arr: ();
-  // first index of separator in string
-  $index: str-index($string, $separator);
-  // loop through string
-  @while $index != null {
-    // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
-    // push item to array
-    $split-arr: append($split-arr, $item);
-    // remove item and separator from string
-    $string: str-slice($string, $index + 1);
-    // find new index of separator
-    $index: str-index($string, $separator);
-  }
-  // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
-// Iterates over a list of keys to read multi-level maps.
-// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
-@function _map-deep-get($map, $keys) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}