@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/systemProps/tests/typography.test.js

@@ -1,20 +1,20 @@
 // @flow strict-local
-import React from "react";
-import styled from "styled-components";
-import { render } from "../../utils/react-testing-library";
-import type { TypeTheme } from "../../types/theme.flow";
+import React from 'react';
+import styled from 'styled-components';
+import {render} from '../../utils/react-testing-library';
+import type {TypeTheme} from '../../types/theme.flow';
 import {
   typographySystemProps,
   type TypeTypographySystemProps,
-} from "../typography";
+} from '../typography';
 
-describe("typography system props", () => {
-  const Component = styled<TypeTypographySystemProps, TypeTheme, "div">("div")`
+describe('typography system props', () => {
+  const Component = styled<TypeTypographySystemProps, TypeTheme, 'div'>('div')`
     ${typographySystemProps}
   `;
 
-  test("fontFamily", () => {
-    const { container } = render(
+  test('fontFamily', () => {
+    const {container} = render(
       <>
         <Component fontFamily="string" />
       </>
@@ -22,8 +22,8 @@ describe("typography system props", () => {
     expect(container).toMatchSnapshot();
   });
 
-  test("fontSize", () => {
-    const { container } = render(
+  test('fontSize', () => {
+    const {container} = render(
       <>
         <Component fontSize="string" />
         <Component fontSize={100} />
@@ -32,8 +32,8 @@ describe("typography system props", () => {
     expect(container).toMatchSnapshot();
   });
 
-  test("fontStyle", () => {
-    const { container } = render(
+  test('fontStyle', () => {
+    const {container} = render(
       <>
         <Component fontStyle="string" />
       </>
@@ -41,8 +41,8 @@ describe("typography system props", () => {
     expect(container).toMatchSnapshot();
   });
 
-  test("fontWeight", () => {
-    const { container } = render(
+  test('fontWeight', () => {
+    const {container} = render(
       <>
         <Component fontWeight="normal" />
         <Component fontWeight="semibold" />
@@ -58,8 +58,8 @@ describe("typography system props", () => {
     expect(container).toMatchSnapshot();
   });
 
-  test("letterSpacing", () => {
-    const { container } = render(
+  test('letterSpacing', () => {
+    const {container} = render(
       <>
         <Component letterSpacing="string" />
         <Component letterSpacing={1} />
@@ -68,8 +68,8 @@ describe("typography system props", () => {
     expect(container).toMatchSnapshot();
   });
 
-  test("lineHeight", () => {
-    const { container } = render(
+  test('lineHeight', () => {
+    const {container} = render(
       <>
         <Component lineHeight="string" />
         <Component lineHeight={1} />
@@ -78,8 +78,8 @@ describe("typography system props", () => {
     expect(container).toMatchSnapshot();
   });
 
-  test("textAlign", () => {
-    const { container } = render(
+  test('textAlign', () => {
+    const {container} = render(
       <>
         <Component textAlign="center" />
         <Component

package/__flow__/systemProps/tests/variant.test.js

@@ -1,17 +1,17 @@
 // @flow strict-local
-import React from "react";
-import styled from "styled-components";
-import { render } from "../../utils/react-testing-library";
-import type { TypeTheme } from "../../types/theme.flow";
-import { variantSystemProps, type TypeVariantSystemProps } from "../variant";
+import React from 'react';
+import styled from 'styled-components';
+import {render} from '../../utils/react-testing-library';
+import type {TypeTheme} from '../../types/theme.flow';
+import {variantSystemProps, type TypeVariantSystemProps} from '../variant';
 
-describe("variant system props", () => {
-  const Component = styled<TypeVariantSystemProps, TypeTheme, "div">("div")`
+describe('variant system props', () => {
+  const Component = styled<TypeVariantSystemProps, TypeTheme, 'div'>('div')`
     ${variantSystemProps}
   `;
 
-  test("typeScale", () => {
-    const { container } = render(
+  test('typeScale', () => {
+    const {container} = render(
       <>
         <Component typeScale="100" />
         <Component

package/__flow__/systemProps/types.flow.js

@@ -14,7 +14,7 @@ export type TypeResponsiveBaseSystemProp<T> = TypeResponsiveSystemProp<TypeBaseS
 export interface StyledSystemStyleFn {
   (...args: mixed[]): mixed;
 
-  config?: { ... } | void;
+  config?: {...} | void;
   propNames?: string[] | void;
-  cache?: { ... } | void;
+  cache?: {...} | void;
 }

package/__flow__/systemProps/typography.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import { typography } from "styled-system";
+import {typography} from 'styled-system';
 import type {
   FontFamilyProperty,
   FontSizeProperty,
@@ -9,13 +9,13 @@ import type {
   LetterSpacingProperty,
   LineHeightProperty,
   TextAlignProperty,
-} from "csstype";
+} from 'csstype';
 
-import typeof { fontWeights as TypeofFontWeights } from "../themes/light/theme";
+import typeof {fontWeights as TypeofFontWeights} from '../themes/light/theme';
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#typography
 

package/__flow__/systemProps/variant.js

@@ -1,8 +1,8 @@
 // @flow strict-local
-import { compose, variant } from "styled-system";
-import type { TypeTypography } from "../types/theme.flow";
+import {compose, variant} from 'styled-system';
+import type {TypeTypography} from '../types/theme.flow';
 
-import type { TypeResponsiveBaseSystemProp } from "./types.flow.js";
+import type {TypeResponsiveBaseSystemProp} from './types.flow.js';
 
 // https://styled-system.com/variants
 
@@ -12,7 +12,7 @@ export type TypeVariantSystemProps = $ReadOnly<{|
 
 export const variantSystemProps = compose(
   variant({
-    key: "typography",
-    prop: "typeScale",
+    key: 'typography',
+    prop: 'typeScale',
   })
 );

package/__flow__/themes/dark/dataviz-palette.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import COLORS from "@sproutsocial/seeds-color";
+import COLORS from '@sproutsocial/seeds-color';
 
 export const datavizPalette = {
   DATAVIZ_COLORS_LIST: [
@@ -26,25 +26,25 @@ export const datavizPalette = {
     COLORS.COLOR_YELLOW_200,
   ],
   DATAVIZ_COLORS_MAP: {
-    "1": COLORS.COLOR_TEAL_400,
-    "2": COLORS.COLOR_PURPLE_400,
-    "3": COLORS.COLOR_PINK_400,
-    "4": COLORS.COLOR_YELLOW_500,
-    "5": COLORS.COLOR_BLUE_400,
-    "6": COLORS.COLOR_MAGENTA_400,
-    "7": COLORS.COLOR_GREEN_400,
-    "8": COLORS.COLOR_ORANGE_400,
-    "9": COLORS.COLOR_RED_700,
-    "10": COLORS.COLOR_TEAL_700,
-    "11": COLORS.COLOR_PURPLE_700,
-    "12": COLORS.COLOR_PINK_700,
-    "13": COLORS.COLOR_YELLOW_800,
-    "14": COLORS.COLOR_BLUE_700,
-    "15": COLORS.COLOR_MAGENTA_700,
-    "16": COLORS.COLOR_GREEN_700,
-    "17": COLORS.COLOR_ORANGE_700,
-    "18": COLORS.COLOR_RED_400,
-    "19": COLORS.COLOR_GREEN_200,
-    "20": COLORS.COLOR_YELLOW_200,
+    '1': COLORS.COLOR_TEAL_400,
+    '2': COLORS.COLOR_PURPLE_400,
+    '3': COLORS.COLOR_PINK_400,
+    '4': COLORS.COLOR_YELLOW_500,
+    '5': COLORS.COLOR_BLUE_400,
+    '6': COLORS.COLOR_MAGENTA_400,
+    '7': COLORS.COLOR_GREEN_400,
+    '8': COLORS.COLOR_ORANGE_400,
+    '9': COLORS.COLOR_RED_700,
+    '10': COLORS.COLOR_TEAL_700,
+    '11': COLORS.COLOR_PURPLE_700,
+    '12': COLORS.COLOR_PINK_700,
+    '13': COLORS.COLOR_YELLOW_800,
+    '14': COLORS.COLOR_BLUE_700,
+    '15': COLORS.COLOR_MAGENTA_700,
+    '16': COLORS.COLOR_GREEN_700,
+    '17': COLORS.COLOR_ORANGE_700,
+    '18': COLORS.COLOR_RED_400,
+    '19': COLORS.COLOR_GREEN_200,
+    '20': COLORS.COLOR_YELLOW_200,
   },
 };

package/__flow__/themes/dark/decorative-palettes.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import COLORS from "@sproutsocial/seeds-color";
+import COLORS from '@sproutsocial/seeds-color';
 
 export const green = {
   background: COLORS.COLOR_GREEN_900,

package/__flow__/themes/dark/theme.js

@@ -1,9 +1,9 @@
 // @flow strict-local
 
-import COLORS from "@sproutsocial/seeds-color";
-import DEPTH from "@sproutsocial/seeds-depth";
-import lightTheme from "../light/theme";
-import { datavizPalette } from "./dataviz-palette";
+import COLORS from '@sproutsocial/seeds-color';
+import DEPTH from '@sproutsocial/seeds-depth';
+import lightTheme from '../light/theme';
+import {datavizPalette} from './dataviz-palette';
 import {
   green,
   blue,
@@ -16,10 +16,10 @@ import {
   pink,
   aqua,
   teal,
-} from "./decorative-palettes";
-import { transparentize } from "polished";
+} from './decorative-palettes';
+import {transparentize} from 'polished';
 
-const MODE = "dark";
+const MODE = 'dark';
 
 export const shadows = {
   low: `${DEPTH.ELEVATION_LEVEL_100} ${COLORS.COLOR_NEUTRAL_1100}FF`,
@@ -97,7 +97,7 @@ const colors = {
         active: COLORS.COLOR_BLUE_200,
       },
       border: {
-        base: "transparent",
+        base: 'transparent',
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_900,
@@ -106,7 +106,7 @@ const colors = {
     },
     secondary: {
       background: {
-        base: "transparent",
+        base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_100,
         active: COLORS.COLOR_NEUTRAL_0,
       },
@@ -120,12 +120,12 @@ const colors = {
     },
     pill: {
       background: {
-        base: "transparent",
+        base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_1000,
         active: COLORS.COLOR_NEUTRAL_900,
       },
       border: {
-        base: "transparent",
+        base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_0,
       },
       text: {
@@ -140,7 +140,7 @@ const colors = {
         active: COLORS.COLOR_RED_200,
       },
       border: {
-        base: "transparent",
+        base: 'transparent',
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_900,
@@ -149,7 +149,7 @@ const colors = {
     },
     placeholder: {
       background: {
-        base: "transparent",
+        base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_1100,
         active: COLORS.COLOR_NEUTRAL_1100,
       },
@@ -163,10 +163,10 @@ const colors = {
     },
     unstyled: {
       background: {
-        base: "transparent",
+        base: 'transparent',
       },
       border: {
-        base: "transparent",
+        base: 'transparent',
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_300,
@@ -221,7 +221,7 @@ const colors = {
   },
   listItem: {
     background: {
-      base: "transparent",
+      base: 'transparent',
       hover: COLORS.COLOR_NEUTRAL_800,
       selected: COLORS.COLOR_NEUTRAL_0,
     },

package/__flow__/themes/extendedThemes/README.md

@@ -3,4 +3,4 @@
 This directory serves as a shared environment for all extended themes. Each unique theme should have its own folder and theme.js file.
 `src/themes/extendedThemes/customTheme/theme.js`
 
-Check out our documentation for [How to extend the theme](https://seeds.sproutsocial.com/components/theme#extending-the-theme) on Seeds.
+Check out our documentation for [How to extend the theme](https://seeds.sproutsocial.com/components/theme#extending-the-theme) on Seeds.

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

@@ -1,7 +1,7 @@
 // @flow strict-local
-import { transparentize } from "polished";
-import baseDarkTheme from "../../../dark/theme";
-import type { TypeSproutTheme } from "../../../../types/theme.flow";
+import {transparentize} from 'polished';
+import baseDarkTheme from '../../../dark/theme';
+import type {TypeSproutTheme} from '../../../../types/theme.flow';
 
 export const navigation = {
   main: {
@@ -34,7 +34,7 @@ export const navigation = {
   settings: {
     listItem: {
       background: {
-        base: "transparent",
+        base: 'transparent',
         hover: baseDarkTheme.colors.neutral[1100],
         selected: baseDarkTheme.colors.neutral[800],
       },

package/__flow__/themes/extendedThemes/sproutTheme/index.js

@@ -1,3 +1,3 @@
 // @flow
-export { default as sproutLightTheme } from "./light/theme";
-export { default as sproutDarkTheme } from "./dark/theme";
+export {default as sproutLightTheme} from './light/theme';
+export {default as sproutDarkTheme} from './dark/theme';

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

@@ -1,7 +1,7 @@
 // @flow strict-local
-import { transparentize } from "polished";
-import baseLightTheme from "../../../light/theme";
-import type { TypeSproutTheme } from "../../../../types/theme.flow";
+import {transparentize} from 'polished';
+import baseLightTheme from '../../../light/theme';
+import type {TypeSproutTheme} from '../../../../types/theme.flow';
 
 export const navigation = {
   main: {
@@ -31,7 +31,7 @@ export const navigation = {
   settings: {
     listItem: {
       background: {
-        base: "transparent",
+        base: 'transparent',
         hover: baseLightTheme.colors.neutral[200],
         selected: baseLightTheme.colors.neutral[0],
       },

package/__flow__/themes/light/dataviz-palette.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import COLORS from "@sproutsocial/seeds-color";
+import COLORS from '@sproutsocial/seeds-color';
 
 export const datavizPalette = {
   DATAVIZ_COLORS_LIST: [
@@ -26,25 +26,25 @@ export const datavizPalette = {
     COLORS.COLOR_YELLOW_800,
   ],
   DATAVIZ_COLORS_MAP: {
-    "1": COLORS.COLOR_TEAL_500,
-    "2": COLORS.COLOR_PURPLE_700,
-    "3": COLORS.COLOR_PINK_700,
-    "4": COLORS.COLOR_YELLOW_500,
-    "5": COLORS.COLOR_BLUE_500,
-    "6": COLORS.COLOR_MAGENTA_500,
-    "7": COLORS.COLOR_GREEN_500,
-    "8": COLORS.COLOR_ORANGE_500,
-    "9": COLORS.COLOR_RED_700,
-    "10": COLORS.COLOR_TEAL_900,
-    "11": COLORS.COLOR_PURPLE_400,
-    "12": COLORS.COLOR_PINK_900,
-    "13": COLORS.COLOR_YELLOW_900,
-    "14": COLORS.COLOR_BLUE_900,
-    "15": COLORS.COLOR_MAGENTA_900,
-    "16": COLORS.COLOR_GREEN_900,
-    "17": COLORS.COLOR_ORANGE_900,
-    "18": COLORS.COLOR_RED_400,
-    "19": COLORS.COLOR_GREEN_700,
-    "20": COLORS.COLOR_YELLOW_800,
+    '1': COLORS.COLOR_TEAL_500,
+    '2': COLORS.COLOR_PURPLE_700,
+    '3': COLORS.COLOR_PINK_700,
+    '4': COLORS.COLOR_YELLOW_500,
+    '5': COLORS.COLOR_BLUE_500,
+    '6': COLORS.COLOR_MAGENTA_500,
+    '7': COLORS.COLOR_GREEN_500,
+    '8': COLORS.COLOR_ORANGE_500,
+    '9': COLORS.COLOR_RED_700,
+    '10': COLORS.COLOR_TEAL_900,
+    '11': COLORS.COLOR_PURPLE_400,
+    '12': COLORS.COLOR_PINK_900,
+    '13': COLORS.COLOR_YELLOW_900,
+    '14': COLORS.COLOR_BLUE_900,
+    '15': COLORS.COLOR_MAGENTA_900,
+    '16': COLORS.COLOR_GREEN_900,
+    '17': COLORS.COLOR_ORANGE_900,
+    '18': COLORS.COLOR_RED_400,
+    '19': COLORS.COLOR_GREEN_700,
+    '20': COLORS.COLOR_YELLOW_800,
   },
 };

package/__flow__/themes/light/decorative-palettes.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import COLORS from "@sproutsocial/seeds-color";
+import COLORS from '@sproutsocial/seeds-color';
 
 export const green = {
   background: COLORS.COLOR_GREEN_100,