@sproutsocial/racine 9.0.0 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.1
+
+### Patch Changes
+
+- 52052ae: Update MenuGroupContainer so that it takes system props instead of css styling
+- 2fc4f88: Adds a `palette` prop to Token and uses the proper accessible color tokens
+- 7a87944: Update @storybook/react to resolve a vulnerability in one of its sub-dependencies (immer)
+
 ## 9.0.0
 
 ### Major Changes

package/__flow__/Listbox/__snapshots__/index.test.js.snap

@@ -388,6 +388,13 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 .c2 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin: 8px;
+  padding: 8px;
+}
+
+.c3 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
 }
 
 .c6 {
@@ -460,10 +467,6 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c3 {
-  padding: 8px;
-}
-
 .c1 {
   list-style-type: none;
   outline: 0;
@@ -558,12 +561,12 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
       width="200px"
     >
       <div
-        class="c2 c3"
+        class="c2"
         role="group"
       >
         <li
           aria-checked="false"
-          class="c2 c4"
+          class="c3 c4"
           data-qa-menu-item="Apple"
           data-value="Apple"
           id="MenuItem-28"
@@ -597,7 +600,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c6"
+          class="c3 c6"
           data-qa-menu-item="Banana"
           data-value="Banana"
           id="MenuItem-29"
@@ -631,7 +634,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c6"
+          class="c3 c6"
           data-qa-menu-item="Orange"
           data-value="Orange"
           id="MenuItem-30"
@@ -683,6 +686,13 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
 .c2 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin: 8px;
+  padding: 8px;
+}
+
+.c4 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
 }
 
 .c7 {
@@ -755,10 +765,6 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c3 {
-  padding: 8px;
-}
-
 .c1 {
   list-style-type: none;
   outline: 0;
@@ -780,12 +786,12 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   margin-right: 8px;
 }
 
-.c4 {
+.c3 {
   box-sizing: border-box;
   position: relative;
 }
 
-.c4 input {
+.c3 input {
   box-sizing: border-box;
   width: 100%;
   border: 1px solid transparent;
@@ -806,34 +812,34 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   font-size: 13px;
 }
 
-.c4 input::-ms-clear {
+.c3 input::-ms-clear {
   display: none;
 }
 
-.c4 input::-webkit-search-cancel-button {
+.c3 input::-webkit-search-cancel-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4 input:focus {
+.c3 input:focus {
   box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
   outline: none;
 }
 
-.c4 input:focus::-moz-focus-inner {
+.c3 input:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c4 input:not(output):not(:focus):-moz-ui-invalid {
+.c3 input:not(output):not(:focus):-moz-ui-invalid {
   box-shadow: none;
 }
 
-.c4 input:placeholder {
+.c3 input:placeholder {
   color: #6e797a;
 }
 
-.c4 input {
+.c3 input {
   border: 1px solid #b0b6b7;
 }
 
@@ -910,11 +916,11 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
       width="200px"
     >
       <div
-        class="c2 c3"
+        class="c2"
         role="group"
       >
         <div
-          class="c4"
+          class="c3"
         >
           <input
             aria-invalid="false"
@@ -931,7 +937,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </div>
         <li
           aria-checked="false"
-          class="c2 c5"
+          class="c4 c5"
           data-qa-menu-item="Apple"
           data-value="Apple"
           id="MenuItem-34"
@@ -965,7 +971,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Banana"
           data-value="Banana"
           id="MenuItem-35"
@@ -999,7 +1005,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Orange"
           data-value="Orange"
           id="MenuItem-36"
@@ -1033,7 +1039,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Tomato"
           data-value="Tomato"
           id="MenuItem-37"
@@ -1067,7 +1073,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Cucumber"
           data-value="Cucumber"
           id="MenuItem-38"
@@ -1101,7 +1107,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Squash"
           data-value="Squash"
           id="MenuItem-39"
@@ -1135,7 +1141,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Cantaloupe"
           data-value="Cantaloupe"
           id="MenuItem-40"
@@ -1169,7 +1175,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Jackalope"
           data-value="Jackalope"
           id="MenuItem-41"
@@ -1203,7 +1209,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Lingonberry"
           data-value="Lingonberry"
           id="MenuItem-42"
@@ -1237,7 +1243,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Dingleberry"
           data-value="Dingleberry"
           id="MenuItem-43"
@@ -1271,7 +1277,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Kaffir Lime"
           data-value="Kaffir Lime"
           id="MenuItem-44"

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -22,6 +22,13 @@ exports[`Menu AsMenu should match snapshot 1`] = `
 .c4 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin: 8px;
+  padding: 8px;
+}
+
+.c5 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
 }
 
 .c7 {
@@ -94,10 +101,6 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c5 {
-  padding: 8px;
-}
-
 .c1 {
   list-style-type: none;
   outline: 0;
@@ -138,11 +141,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c4 c5"
+        class="c4"
         role="group"
       >
         <li
-          class="c4 c6"
+          class="c5 c6"
           data-qa-menu-item="Apple"
           id="MenuItem-1"
           role="menuitem"
@@ -159,7 +162,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
           </div>
         </li>
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Banana"
           id="MenuItem-2"
           role="menuitem"
@@ -176,7 +179,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
           </div>
         </li>
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Orange"
           id="MenuItem-3"
           role="menuitem"
@@ -206,11 +209,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c4 c5"
+        class="c4"
         role="group"
       >
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Tomato"
           id="MenuItem-4"
           role="menuitem"
@@ -227,7 +230,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
           </div>
         </li>
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Cucumber"
           id="MenuItem-5"
           role="menuitem"
@@ -244,7 +247,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
           </div>
         </li>
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Squash"
           id="MenuItem-6"
           role="menuitem"

package/__flow__/Menu/index.js

@@ -10,11 +10,7 @@ import {
   useState,
 } from "react";
 import uniqueId from "lodash.uniqueid";
-import {
-  MenuGroupContainer,
-  MenuItemContainer,
-  MenuItemsContainer,
-} from "./styles";
+import { MenuItemContainer, MenuItemsContainer } from "./styles";
 import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
 
 import Box from "../Box";
@@ -291,9 +287,9 @@ export const MenuGroup = ({
         </Text>
       </Box>
     )}
-    <MenuGroupContainer {...props} role="group">
+    <Box {...props} m={300} p={300} role="group">
       {children}
-    </MenuGroupContainer>
+    </Box>
   </>
 );
 

package/__flow__/Menu/styles.js

@@ -1,7 +1,7 @@
 // @flow
 import styled, { css } from "styled-components";
 import Box from "../Box";
-import type { TypeMenuGroupProps, TypeMenuItemProps } from "./index.flow";
+import type { TypeMenuItemProps } from "./index.flow";
 import type { TypeTheme } from "../types/theme.flow";
 import { disabled } from "../utils/mixins";
 
@@ -84,24 +84,7 @@ export const MenuItemContainer = styled<
   ${(props) => props.disabled && disabled}
 `;
 
-export const MenuGroupContainer = styled<
-  typeof Box,
-  TypeTheme,
-  TypeMenuGroupProps
->(Box)`
-  ${(props) =>
-    props.appearance === "flush"
-      ? css`
-          margin: 0 -${(props) => props.theme.space[300]};
-        `
-      : css`
-          padding: ${(props) => props.theme.space[300]};
-        `};
-`;
-
 export const MenuItemsContainer = styled<typeof Box, TypeTheme>(Box)`
   list-style-type: none;
   outline: 0;
 `;
-
-export default MenuGroupContainer;

package/__flow__/Modal/index.test.js

@@ -7,22 +7,6 @@ import { COLOR_PURPLE_300 } from "@sproutsocial/seeds-color";
 afterEach(() => cleanup());
 
 describe("Modal", () => {
-  it("should render properly", () => {
-    // Use baseElement since it renders in a Portal
-    const { baseElement } = render(
-      <Modal
-        isOpen={true}
-        label="Label"
-        bg={COLOR_PURPLE_300}
-        onClose={() => {}}
-        closeButtonLabel="Close this dialog"
-      >
-        ajdsfljasdlfjlasdjf
-      </Modal>
-    );
-    expect(baseElement.querySelector(".ReactModal__Overlay")).toMatchSnapshot();
-  });
-
   it("renders a custom background color", () => {
     // Use baseElement since it renders in a Portal
     const { baseElement } = render(

package/__flow__/Token/index.js

@@ -15,6 +15,7 @@ export type TypeProps = {
   valid?: boolean,
   /** Indicates whether the token is disabled */
   disabled?: boolean,
+  palette?: "neutral" | "blue",
 };
 
 const Token = ({
@@ -24,6 +25,7 @@ const Token = ({
   qa,
   valid = true,
   disabled = false,
+  palette = "neutral",
   ...rest
 }: TypeProps) => {
   const textContainer = useTextContent("");
@@ -32,8 +34,9 @@ const Token = ({
     <Container
       ref={textContainer}
       valid={valid}
-      as={closeable || onClick ? "button" : "div"}
+      palette={palette}
       type={closeable || onClick ? "button" : undefined}
+      as={closeable || onClick ? "button" : "div"}
       closeable={closeable || onClick}
       disabled={disabled}
       onClick={onClick}

package/__flow__/Token/index.stories.js

@@ -80,3 +80,14 @@ export const staticWithIcon = () => (
 staticWithIcon.story = {
   name: "Static with icon",
 };
+
+export const bluePalette = () => (
+  <Token palette="blue" closeable={boolean("closeable", false)}>
+    <Icon size="mini" name="twitter" pr={300} />
+    <span>I'm blue</span>
+  </Token>
+);
+
+bluePalette.story = {
+  name: "Palette Variation",
+};

package/__flow__/Token/styles.js

@@ -6,68 +6,78 @@ import { focusRing } from "../utils/mixins";
 import type { TypeTheme } from "../types/theme.flow";
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.button`
-  font-family: ${(props) => props.theme.fontFamily};
-  ${(props) => props.theme.typography[200]};
   position: relative;
   display: inline-block;
-  padding: ${(props) => props.theme.space[200]}
-    ${(props) => props.theme.space[300]};
   margin: 0;
-  color: ${(props) => props.theme.colors.text.body};
-  background: ${(props) => props.theme.colors.container.background.base};
-  border: 1px solid ${(props) => props.theme.colors.container.border.base};
-  font-weight: ${(props) => props.theme.fontWeights.normal};
   line-height: 1;
   vertical-align: middle;
-  border-radius: ${(props) => props.theme.radii[500]};
   outline: none;
-  transition: all ${(props) => props.theme.duration.fast}
-    ${(props) => props.theme.easing.ease_inout};
+  /* Theme Properties */
+  ${({ theme }) => css`
+    ${theme.typography[200]}
+    font-family: ${theme.fontFamily};
+    font-weight: ${theme.fontWeights.normal};
+    border: 1px solid ${theme.colors.container.border.base};
+    border-radius: ${theme.radii[500]};
+    color: ${theme.colors.text.body};
+    background: ${theme.colors.container.background.base};
+    padding: ${theme.space[200]} ${theme.space[300]};
+    transition: all ${theme.duration.fast} ${theme.easing.ease_inout};
+  `}
 
   &:focus {
     ${focusRing}
   }
 
-  ${(props) =>
-    props.closeable &&
+  ${({ theme, palette }) =>
+    palette === "blue" &&
     css`
-      cursor: pointer;
+      color: ${theme.colors.text.body};
+      background: ${theme.colors.container.background.decorative.blue};
+      border: 1px solid ${theme.colors.container.border.decorative.blue};
+      &:hover,
+      &:active {
+        cursor: pointer;
+        box-shadow: ${theme.shadows.low};
+        border: 1px solid
+          ${theme.utils.interact(theme.colors.container.border.decorative.blue)};
+      }
+    `}
 
+  ${({ closeable, theme }) =>
+    closeable &&
+    css`
+      cursor: pointer;
       &:hover,
       &:active {
-        color: ${(props) => props.theme.colors.text.body};
+        box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${(props) => props.theme.colors.container.border.decorative.neutral};
-        background-color: ${(props) =>
-          props.theme.colors.container.background.decorative.neutral};
+          ${theme.utils.interact(theme.colors.container.border.base)};
       }
     `}
 
-  ${(props) =>
-    props.disabled &&
+  ${({ disabled, theme }) =>
+    disabled &&
     css`
       opacity: 0.4;
       cursor: not-allowed;
       &:hover,
       &:active {
-        background: ${(props) => props.theme.colors.container.background.base};
-        border: 1px solid ${(props) => props.theme.colors.container.border.base};
+        box-shadow: none;
+        border: 1px solid ${theme.colors.container.border.base};
       }
     `}
-
-  ${(props) =>
-    !props.valid &&
+    
+  ${({ valid, theme }) =>
+    !valid &&
     css`
-      color: ${(props) => props.theme.colors.text.body};
-      border-color: ${(props) => props.theme.colors.container.border.error};
-      background: ${(props) => props.theme.colors.container.background.error};
-
+      color: ${theme.colors.text.error};
+      background: ${theme.colors.container.background.error};
+      border: 1px solid ${theme.colors.container.border.error};
       &:hover {
-        color: ${(props) => props.theme.colors.text.body};
+        box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${(props) => props.theme.colors.container.border.error};
-        background-color: ${(props) =>
-          props.theme.colors.container.background.error};
+          ${theme.utils.interact(theme.colors.container.border.error)};
       }
     `}
 

package/__flow__/themes/dark/theme.js

@@ -14,6 +14,10 @@ import {
   neutral,
 } from "./decorative-palettes";
 
+import interact from "../utils/interact";
+
+const MODE = "default-dark";
+
 export const shadows = {
   low: `${DEPTH.ELEVATION_LEVEL_100} ${COLORS.COLOR_NEUTRAL_1100}FF`,
   medium: `${DEPTH.ELEVATION_LEVEL_300} ${COLORS.COLOR_NEUTRAL_1100}FF`,
@@ -22,6 +26,9 @@ export const shadows = {
 
 const colors = {
   ...defaultTheme.colors,
+  utils: {
+    interact: interact(MODE),
+  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000,
@@ -208,7 +215,7 @@ const darkTheme = {
   ...defaultTheme,
   colors,
   shadows,
-  mode: "dark",
+  mode: MODE,
 };
 
 export default darkTheme;

package/__flow__/themes/default/theme.js

@@ -19,8 +19,12 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 
+import interact from "../utils/interact";
+
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
+const MODE = "default-light";
+
 const colors = {
   app: {
     background: {
@@ -321,6 +325,9 @@ export const duration = {
 };
 
 const theme = {
+  utils: {
+    interact: interact(MODE),
+  },
   breakpoints,
   colors,
   typography: {
@@ -347,6 +354,7 @@ const theme = {
   shadows,
   easing,
   duration,
+  mode: MODE,
 };
 
 export default theme;

package/__flow__/themes/utils/interact.js

@@ -0,0 +1,12 @@
+//@flow strict-local
+import { darken, lighten } from "polished";
+
+const interact = (mode: string) => (themeValue: string) => {
+  if (mode === "default-dark") {
+    return lighten(0.2, themeValue);
+  } else {
+    return darken(0.2, themeValue);
+  }
+};
+
+export default interact;

package/commonjs/Menu/index.js

@@ -277,7 +277,9 @@ var MenuGroup = function MenuGroup(_ref2) {
     mt: 350,
     color: "text.headline",
     _css: isDisabled && _mixins.disabled
-  }, title)), /*#__PURE__*/React.createElement(_styles.MenuGroupContainer, _extends({}, props, {
+  }, title)), /*#__PURE__*/React.createElement(_Box.default, _extends({}, props, {
+    m: 300,
+    p: 300,
     role: "group"
   }), children));
 };

package/commonjs/Menu/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.MenuItemsContainer = exports.MenuGroupContainer = exports.MenuItemContainer = void 0;
+exports.MenuItemsContainer = exports.MenuItemContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -56,21 +56,8 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
   return props.disabled && _mixins.disabled;
 });
 exports.MenuItemContainer = MenuItemContainer;
-var MenuGroupContainer = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "styles__MenuGroupContainer",
-  componentId: "fjvae4-1"
-})(["", ";"], function (props) {
-  return props.appearance === "flush" ? (0, _styledComponents.css)(["margin:0 -", ";"], function (props) {
-    return props.theme.space[300];
-  }) : (0, _styledComponents.css)(["padding:", ";"], function (props) {
-    return props.theme.space[300];
-  });
-});
-exports.MenuGroupContainer = MenuGroupContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
-  componentId: "fjvae4-2"
+  componentId: "fjvae4-1"
 })(["list-style-type:none;outline:0;"]);
-exports.MenuItemsContainer = MenuItemsContainer;
-var _default = MenuGroupContainer;
-exports.default = _default;
+exports.MenuItemsContainer = MenuItemsContainer;

package/commonjs/Token/index.js

@@ -33,14 +33,17 @@ var Token = function Token(_ref) {
       valid = _ref$valid === void 0 ? true : _ref$valid,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled"]);
+      _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"]);
 
   var textContainer = (0, _hooks.useTextContent)("");
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     ref: textContainer,
     valid: valid,
-    as: closeable || onClick ? "button" : "div",
+    palette: palette,
     type: closeable || onClick ? "button" : undefined,
+    as: closeable || onClick ? "button" : "div",
     closeable: closeable || onClick,
     disabled: disabled,
     onClick: onClick,

package/commonjs/Token/styles.js

@@ -16,56 +16,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.button.withConfig({
   displayName: "styles__Container",
   componentId: "nyn5zy-0"
-})(["font-family:", ";", ";position:relative;display:inline-block;padding:", " ", ";margin:0;color:", ";background:", ";border:1px solid ", ";font-weight:", ";line-height:1;vertical-align:middle;border-radius:", ";outline:none;transition:all ", " ", ";&:focus{", "}", " ", " ", " ", ""], function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.typography[200];
-}, function (props) {
-  return props.theme.space[200];
-}, function (props) {
-  return props.theme.space[300];
-}, function (props) {
-  return props.theme.colors.text.body;
-}, function (props) {
-  return props.theme.colors.container.background.base;
-}, function (props) {
-  return props.theme.colors.container.border.base;
-}, function (props) {
-  return props.theme.fontWeights.normal;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
-}, _mixins.focusRing, function (props) {
-  return props.closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.decorative.neutral;
-  }, function (props) {
-    return props.theme.colors.container.background.decorative.neutral;
-  });
-}, function (props) {
-  return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;&:hover,&:active{background:", ";border:1px solid ", ";}"], function (props) {
-    return props.theme.colors.container.background.base;
-  }, function (props) {
-    return props.theme.colors.container.border.base;
-  });
-}, function (props) {
-  return !props.valid && (0, _styledComponents.css)(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  }, function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  });
+})(["position:relative;display:inline-block;margin:0;line-height:1;vertical-align:middle;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  return (0, _styledComponents.css)(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
+}, _mixins.focusRing, function (_ref2) {
+  var theme = _ref2.theme,
+      palette = _ref2.palette;
+  return palette === "blue" && (0, _styledComponents.css)(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, theme.utils.interact(theme.colors.container.border.decorative.blue));
+}, function (_ref3) {
+  var closeable = _ref3.closeable,
+      theme = _ref3.theme;
+  return closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+}, function (_ref4) {
+  var disabled = _ref4.disabled,
+      theme = _ref4.theme;
+  return disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;&:hover,&:active{box-shadow:none;border:1px solid ", ";}"], theme.colors.container.border.base);
+}, function (_ref5) {
+  var valid = _ref5.valid,
+      theme = _ref5.theme;
+  return !valid && (0, _styledComponents.css)(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, theme.utils.interact(theme.colors.container.border.error));
 }, _systemProps.COMMON);
 
 var _default = Container;

package/commonjs/themes/dark/theme.js

@@ -13,10 +13,13 @@ var _datavizPalette = require("./dataviz-palette");
 
 var _decorativePalettes = require("./decorative-palettes");
 
+var _interact = _interopRequireDefault(require("../utils/interact"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+var MODE = "default-dark";
 var shadows = {
   low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
   medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
@@ -25,6 +28,9 @@ var shadows = {
 exports.shadows = shadows;
 
 var colors = _extends({}, _theme.default.colors, {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   app: {
     background: {
       base: _seedsColor.default.COLOR_NEUTRAL_1000
@@ -209,7 +215,7 @@ var colors = _extends({}, _theme.default.colors, {
 var darkTheme = _extends({}, _theme.default, {
   colors: colors,
   shadows: shadows,
-  mode: "dark"
+  mode: MODE
 });
 
 var _default = darkTheme;

package/commonjs/themes/default/theme.js

@@ -23,12 +23,15 @@ var _seedsMotion = _interopRequireDefault(require("@sproutsocial/seeds-motion"))
 
 var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"));
 
+var _interact = _interopRequireDefault(require("../utils/interact"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var breakpoints = ["900px", "1200px", "1500px", "1800px"];
 exports.breakpoints = breakpoints;
+var MODE = "default-light";
 
 var colors = _extends({
   app: {
@@ -312,6 +315,9 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -334,7 +340,8 @@ var theme = {
   borderWidths: borderWidths,
   shadows: shadows,
   easing: easing,
-  duration: duration
+  duration: duration,
+  mode: MODE
 };
 var _default = theme;
 exports.default = _default;

package/commonjs/themes/utils/interact.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _polished = require("polished");
+
+var interact = function interact(mode) {
+  return function (themeValue) {
+    if (mode === "default-dark") {
+      return (0, _polished.lighten)(0.2, themeValue);
+    } else {
+      return (0, _polished.darken)(0.2, themeValue);
+    }
+  };
+};
+
+var _default = interact;
+exports.default = _default;

package/dist/themes/dark.scss

@@ -6,6 +6,9 @@ $dark: (
     high: 0px 16px 32px #040404FF
   ),
   default: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -409,6 +412,9 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
+      ),
+      utils: (
+        
       )
     ),
     typography: (
@@ -590,6 +596,6 @@ $dark: (
       medium: .3s,
       slow: .6s
     ),
-    mode: dark
+    mode: default-dark
   )
 );

package/dist/themes/default.scss

@@ -100,6 +100,9 @@ $default: (
     slow: .6s
   ),
   default: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -683,6 +686,7 @@ $default: (
       fast: .15s,
       medium: .3s,
       slow: .6s
-    )
+    ),
+    mode: default-light
   )
 );

package/lib/Menu/index.js

@@ -8,7 +8,7 @@ import * as React from "react";
 import styled from "styled-components";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import uniqueId from "lodash.uniqueid";
-import { MenuGroupContainer, MenuItemContainer, MenuItemsContainer } from "./styles";
+import { MenuItemContainer, MenuItemsContainer } from "./styles";
 import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
 import Box from "../Box";
 import Button from "../Button";
@@ -244,7 +244,9 @@ export var MenuGroup = function MenuGroup(_ref2) {
     mt: 350,
     color: "text.headline",
     _css: isDisabled && disabled
-  }, title)), /*#__PURE__*/React.createElement(MenuGroupContainer, _extends({}, props, {
+  }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+    m: 300,
+    p: 300,
     role: "group"
   }), children));
 };

package/lib/Menu/styles.js

@@ -41,18 +41,7 @@ export var MenuItemContainer = styled(Box).withConfig({
 }, function (props) {
   return props.disabled && disabled;
 });
-export var MenuGroupContainer = styled(Box).withConfig({
-  displayName: "styles__MenuGroupContainer",
-  componentId: "fjvae4-1"
-})(["", ";"], function (props) {
-  return props.appearance === "flush" ? css(["margin:0 -", ";"], function (props) {
-    return props.theme.space[300];
-  }) : css(["padding:", ";"], function (props) {
-    return props.theme.space[300];
-  });
-});
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
-  componentId: "fjvae4-2"
-})(["list-style-type:none;outline:0;"]);
-export default MenuGroupContainer;
+  componentId: "fjvae4-1"
+})(["list-style-type:none;outline:0;"]);

package/lib/Token/index.js

@@ -18,14 +18,17 @@ var Token = function Token(_ref) {
       valid = _ref$valid === void 0 ? true : _ref$valid,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled"]);
+      _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"]);
 
   var textContainer = useTextContent("");
   return /*#__PURE__*/React.createElement(Container, _extends({
     ref: textContainer,
     valid: valid,
-    as: closeable || onClick ? "button" : "div",
+    palette: palette,
     type: closeable || onClick ? "button" : undefined,
+    as: closeable || onClick ? "button" : "div",
     closeable: closeable || onClick,
     disabled: disabled,
     onClick: onClick,

package/lib/Token/styles.js

@@ -4,55 +4,24 @@ import { focusRing } from "../utils/mixins";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "nyn5zy-0"
-})(["font-family:", ";", ";position:relative;display:inline-block;padding:", " ", ";margin:0;color:", ";background:", ";border:1px solid ", ";font-weight:", ";line-height:1;vertical-align:middle;border-radius:", ";outline:none;transition:all ", " ", ";&:focus{", "}", " ", " ", " ", ""], function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.typography[200];
-}, function (props) {
-  return props.theme.space[200];
-}, function (props) {
-  return props.theme.space[300];
-}, function (props) {
-  return props.theme.colors.text.body;
-}, function (props) {
-  return props.theme.colors.container.background.base;
-}, function (props) {
-  return props.theme.colors.container.border.base;
-}, function (props) {
-  return props.theme.fontWeights.normal;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
-}, focusRing, function (props) {
-  return props.closeable && css(["cursor:pointer;&:hover,&:active{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.decorative.neutral;
-  }, function (props) {
-    return props.theme.colors.container.background.decorative.neutral;
-  });
-}, function (props) {
-  return props.disabled && css(["opacity:0.4;cursor:not-allowed;&:hover,&:active{background:", ";border:1px solid ", ";}"], function (props) {
-    return props.theme.colors.container.background.base;
-  }, function (props) {
-    return props.theme.colors.container.border.base;
-  });
-}, function (props) {
-  return !props.valid && css(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  }, function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  });
+})(["position:relative;display:inline-block;margin:0;line-height:1;vertical-align:middle;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  return css(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
+}, focusRing, function (_ref2) {
+  var theme = _ref2.theme,
+      palette = _ref2.palette;
+  return palette === "blue" && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, theme.utils.interact(theme.colors.container.border.decorative.blue));
+}, function (_ref3) {
+  var closeable = _ref3.closeable,
+      theme = _ref3.theme;
+  return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+}, function (_ref4) {
+  var disabled = _ref4.disabled,
+      theme = _ref4.theme;
+  return disabled && css(["opacity:0.4;cursor:not-allowed;&:hover,&:active{box-shadow:none;border:1px solid ", ";}"], theme.colors.container.border.base);
+}, function (_ref5) {
+  var valid = _ref5.valid,
+      theme = _ref5.theme;
+  return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, theme.utils.interact(theme.colors.container.border.error));
 }, COMMON);
 export default Container;

package/lib/themes/dark/theme.js

@@ -5,6 +5,8 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import defaultTheme from "../default/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
+import interact from "../utils/interact";
+var MODE = "default-dark";
 export var shadows = {
   low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
   medium: DEPTH.ELEVATION_LEVEL_300 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
@@ -12,6 +14,9 @@ export var shadows = {
 };
 
 var colors = _extends({}, defaultTheme.colors, {
+  utils: {
+    interact: interact(MODE)
+  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000
@@ -196,7 +201,7 @@ var colors = _extends({}, defaultTheme.colors, {
 var darkTheme = _extends({}, defaultTheme, {
   colors: colors,
   shadows: shadows,
-  mode: "dark"
+  mode: MODE
 });
 
 export default darkTheme;

package/lib/themes/default/theme.js

@@ -10,7 +10,9 @@ import SPACE from "@sproutsocial/seeds-space";
 import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
+import interact from "../utils/interact";
 export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
+var MODE = "default-light";
 
 var colors = _extends({
   app: {
@@ -284,6 +286,9 @@ export var duration = {
   slow: MOTION.MOTION_DURATION_SLOW
 };
 var theme = {
+  utils: {
+    interact: interact(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -306,6 +311,7 @@ var theme = {
   borderWidths: borderWidths,
   shadows: shadows,
   easing: easing,
-  duration: duration
+  duration: duration,
+  mode: MODE
 };
 export default theme;

package/lib/themes/utils/interact.js

@@ -0,0 +1,13 @@
+import { darken, lighten } from "polished";
+
+var interact = function interact(mode) {
+  return function (themeValue) {
+    if (mode === "default-dark") {
+      return lighten(0.2, themeValue);
+    } else {
+      return darken(0.2, themeValue);
+    }
+  };
+};
+
+export default interact;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -103,7 +103,7 @@
     "@storybook/addon-storysource": "^6.1.11",
     "@storybook/addon-viewport": "^6.1.11",
     "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
+    "@storybook/react": "^6.4.19",
     "@storybook/theming": "^6.1.11",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.0",

package/__flow__/Modal/__snapshots__/index.test.js.snap

@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Modal should render properly 1`] = `
-.c0__Overlay {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  background-color: rgba(22,32,32,0.68);
-  opacity: 0;
-  will-change: opacity;
-  -webkit-transition: opacity .3s cubic-bezier(.4,0,.2,1);
-  transition: opacity .3s cubic-bezier(.4,0,.2,1);
-  z-index: 6;
-}
-
-.c0__Overlay.ReactModal__Overlay--after-open {
-  opacity: 1;
-}
-
-.c0__Overlay.ReactModal__Overlay--before-close {
-  opacity: 0;
-}
-
-.c0__Content {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  background: #FFFFFF;
-  border-radius: 6px;
-  box-shadow: 0px 8px 16px #2733333D;
-  -webkit-filter: blur(0);
-  filter: blur(0);
-  color: #364141;
-  outline: none;
-  max-width: calc(100vw - 64px);
-  max-height: calc(100vh - 64px);
-  width: 800px;
-  background-color: #c1c1f7;
-}
-
-@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
-  .c0__Content {
-    height: calc(100vh - 64px);
-  }
-}
-
-<div
-  class="ReactModal__Overlay ReactModal__Overlay--after-open styles__Container-sc-9lom4g-0__Overlay c0 c0__Overlay"
->
-  <div
-    aria-label="Label"
-    aria-modal="true"
-    class="ReactModal__Content ReactModal__Content--after-open styles__Container-sc-9lom4g-0__Content c0 c0__Content"
-    data-qa-modal=""
-    data-qa-modal-isopen="true"
-    role="dialog"
-    tabindex="-1"
-  >
-    ajdsfljasdlfjlasdjf
-  </div>
-</div>
-`;