@sproutsocial/racine 20.15.0 → 20.17.0

package/lib/Modal/Modal.flow.js

@@ -1,2 +1,2 @@
-import * as React from 'react';
+import * as React from "react";
 import Box from "../Box/index.flow";

package/lib/Modal/Modal.js

@@ -4,8 +4,8 @@ var _excluded = ["title", "subtitle", "children", "bordered"],
 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); }
 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 { useContext } from 'react';
+import * as React from "react";
+import { useContext } from "react";
 import Box from "../Box";
 import Button from "../Button";
 import Icon from "../Icon";
@@ -54,7 +54,7 @@ var ModalFooter = function ModalFooter(props) {
   }, props));
 };
 ModalFooter.defaultProps = {
-  bg: 'container.background.base'
+  bg: "container.background.base"
 };
 var ModalContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -100,8 +100,8 @@ var Modal = function Modal(props) {
     width: width,
     zIndex: zIndex,
     data: {
-      'qa-modal': '',
-      'qa-modal-isopen': isOpen
+      "qa-modal": "",
+      "qa-modal-isopen": isOpen
     }
   }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Body, null), /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: {
@@ -112,13 +112,13 @@ var Modal = function Modal(props) {
   }, children)));
 };
 Modal.defaultProps = {
-  width: '800px',
+  width: "800px",
   zIndex: 6
 };
-ModalHeader.displayName = 'Modal.Header';
-ModalFooter.displayName = 'Modal.Footer';
-ModalContent.displayName = 'Modal.Content';
-ModalCloseButton.displayName = 'Modal.CloseButton';
+ModalHeader.displayName = "Modal.Header";
+ModalFooter.displayName = "Modal.Footer";
+ModalContent.displayName = "Modal.Content";
+ModalCloseButton.displayName = "Modal.CloseButton";
 Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 Modal.Content = ModalContent;

package/lib/Modal/styles.js

@@ -2,28 +2,28 @@ var _excluded = ["className"];
 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); }
 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 React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-import { width, zIndex } from 'styled-system';
-import ReactModal from 'react-modal';
+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 Box from "../Box";
 
 // This is the max space allowed between the modal and the edge of the browser
-var BODY_PADDING = '64px';
+var BODY_PADDING = "64px";
 var ReactModalAdapter = function ReactModalAdapter(_ref) {
   var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
+    className = _ref$className === void 0 ? "" : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
   // We want to create *__Content and *__Overlay class names on the subcomponents.
   // Because `className` could be a space-separated list of class names, we make
   // sure that we append `__Content` and `__Overlay` to every class name.
-  var contentClassName = className.split(' ').map(function (className) {
+  var contentClassName = className.split(" ").map(function (className) {
     return "".concat(className, " ").concat(className, "__Content");
-  }).join(' ');
-  var overlayClassName = className.split(' ').map(function (className) {
+  }).join(" ");
+  var overlayClassName = className.split(" ").map(function (className) {
     return "".concat(className, " ").concat(className, "__Overlay");
-  }).join(' ');
+  }).join(" ");
   return /*#__PURE__*/React.createElement(ReactModal, _extends({
     portalClassName: className,
     className: contentClassName,
@@ -75,7 +75,7 @@ export var Header = styled(HeaderContainer).withConfig({
 })(["display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;border-bottom-width:", ";border-bottom-color:", ";border-bottom-style:solid;"], function (props) {
   return props.theme.borderWidths[500];
 }, function (props) {
-  return props.bordered ? props.theme.colors.container.border.base : 'transparent';
+  return props.bordered ? props.theme.colors.container.border.base : "transparent";
 });
 export var Footer = styled(Box).withConfig({
   displayName: "styles__Footer",
@@ -91,7 +91,7 @@ export var Footer = styled(Box).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 });
-Container.displayName = 'ModalContainer';
-Content.displayName = 'Content';
-Header.displayName = 'Modal.Header';
-Footer.displayName = 'Modal.Footer';
+Container.displayName = "ModalContainer";
+Content.displayName = "Content";
+Header.displayName = "Modal.Header";
+Footer.displayName = "Modal.Footer";

package/lib/Numeral/Numeral.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/Numeral/Numeral.js

@@ -8,8 +8,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 memoize from 'lru-memoize';
+import * as React from "react";
+import memoize from "lru-memoize";
 import { EM_DASH } from "../utils/constants";
 import Tooltip from "../Tooltip";
 import { VisuallyHidden } from "../VisuallyHidden";
@@ -22,7 +22,7 @@ var _getNumberFormatters = function _getNumberFormatters(options) {
     min = options.min,
     max = options.max;
   var compactPrecision = min === max ? min : ABBREV_PRECISION;
-  var _currency = format === 'currency' ? currency : undefined;
+  var _currency = format === "currency" ? currency : undefined;
   var standard = {
     style: format,
     minimumFractionDigits: min,
@@ -34,7 +34,7 @@ var _getNumberFormatters = function _getNumberFormatters(options) {
     minimumFractionDigits: compactPrecision,
     maximumFractionDigits: compactPrecision,
     currency: _currency,
-    notation: 'compact'
+    notation: "compact"
   };
   // Safari 14.1 is currently throwing errors when trying to use the compact
   // options of NumberFormat
@@ -55,26 +55,26 @@ var _getNumberFormatters = function _getNumberFormatters(options) {
 var memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
 var getNumberFormatters = memoizer(_getNumberFormatters);
 var getThreshold = function getThreshold(abbreviate) {
-  if (typeof abbreviate === 'number') return Math.max(1000, abbreviate);
+  if (typeof abbreviate === "number") return Math.max(1000, abbreviate);
   if (abbreviate) return DEFAULT_THRESHOLD;
   return Infinity;
 };
 var getMinMaxPrecision = function getMinMaxPrecision(precision, format) {
-  if (typeof precision === 'number') return [precision, precision];
-  if (precision === 'none') return [0, MAX_PRECISION];
+  if (typeof precision === "number") return [precision, precision];
+  if (precision === "none") return [0, MAX_PRECISION];
   return DefaultPrecisions[format];
 };
 var isValidNumber = function isValidNumber(value) {
-  return typeof value === 'number' && isFinite(value);
+  return typeof value === "number" && isFinite(value);
 };
 var normalizeArgs = function normalizeArgs(props) {
   var number = props.number,
     _props$locale = props.locale,
-    locale = _props$locale === void 0 ? 'us-EN' : _props$locale,
+    locale = _props$locale === void 0 ? "us-EN" : _props$locale,
     _props$format = props.format,
-    format = _props$format === void 0 ? props.currency ? 'currency' : 'decimal' : _props$format,
+    format = _props$format === void 0 ? props.currency ? "currency" : "decimal" : _props$format,
     _props$currency = props.currency,
-    currency = _props$currency === void 0 ? 'USD' : _props$currency,
+    currency = _props$currency === void 0 ? "USD" : _props$currency,
     _props$abbreviate = props.abbreviate,
     abbreviate = _props$abbreviate === void 0 ? true : _props$abbreviate,
     invalidNumberLabel = props.invalidNumberLabel,
@@ -87,7 +87,7 @@ var normalizeArgs = function normalizeArgs(props) {
     min = _getMinMaxPrecision2[0],
     max = _getMinMaxPrecision2[1];
   var _number = number || 0;
-  var value = _number * (format === 'percent' ? 0.01 : 1);
+  var value = _number * (format === "percent" ? 0.01 : 1);
   var canAbbreviate = _number >= threshold;
   var options = {
     locale: locale,

package/lib/Numeral/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 import Text from "../Text";
 export var Container = styled(Text).withConfig({
   displayName: "styles__Container",

package/lib/PartnerLogo/PartnerLogo.flow.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 /**
  * @deprecated Use EnumLogoNames instead

package/lib/PartnerLogo/PartnerLogo.js

@@ -2,20 +2,20 @@ var _excluded = ["partnerName", "backgroundType", "logoType", "height", "width",
 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); }
 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 React from 'react';
-import { useTheme } from 'styled-components';
+import React from "react";
+import { useTheme } from "styled-components";
 import logoViewBoxes from "../LogoViewBoxes";
 import Container from "./styles";
 var whichLogo = function whichLogo(_ref, mode) {
   var backgroundType = _ref.backgroundType,
     logoType = _ref.logoType,
     partnerName = _ref.partnerName;
-  var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
-  if (backgroundType && backgroundType === 'dark') {
+  var logo = logoType && logoType !== "symbol" ? partnerName + "-" + logoType : partnerName;
+  if (backgroundType && backgroundType === "dark") {
     return "".concat(logo, "-dark");
-  } else if (backgroundType && backgroundType === 'light') {
+  } else if (backgroundType && backgroundType === "light") {
     return logo;
-  } else if (mode === 'dark') {
+  } else if (mode === "dark") {
     return "".concat(logo, "-dark");
   } else {
     return logo;
@@ -25,11 +25,11 @@ var PartnerLogo = function PartnerLogo(_ref2) {
   var partnerName = _ref2.partnerName,
     backgroundType = _ref2.backgroundType,
     _ref2$logoType = _ref2.logoType,
-    logoType = _ref2$logoType === void 0 ? 'symbol' : _ref2$logoType,
+    logoType = _ref2$logoType === void 0 ? "symbol" : _ref2$logoType,
     height = _ref2.height,
     width = _ref2.width,
     size = _ref2.size,
-    ariaLabel = _ref2['aria-label'],
+    ariaLabel = _ref2["aria-label"],
     svgProps = _ref2.svgProps,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useTheme = useTheme(),
@@ -40,13 +40,13 @@ var PartnerLogo = function PartnerLogo(_ref2) {
     partnerName: partnerName
   }, mode);
   var logoViewBox = logoViewBoxes[logo];
-  var viewBoxCoordinates = (logoViewBox === null || logoViewBox === void 0 ? void 0 : logoViewBox.split(' ')) || [];
+  var viewBoxCoordinates = (logoViewBox === null || logoViewBox === void 0 ? void 0 : logoViewBox.split(" ")) || [];
   var defaultWidth = viewBoxCoordinates[2];
   var defaultHeight = viewBoxCoordinates[3];
   return /*#__PURE__*/React.createElement(Container //we add pixels here because view box coordinates are numbers
   , _extends({
-    height: height ? height : defaultHeight + 'px',
-    width: width ? width : defaultWidth + 'px',
+    height: height ? height : defaultHeight + "px",
+    width: width ? width : defaultWidth + "px",
     logoSize: size,
     className: "logo",
     role: "img",

package/lib/PartnerLogo/PartnerLogoTypes.js

@@ -10,10 +10,10 @@ export var PartnerNames = PartnerLogoNames;
  */
 
 export var PartnerLogoSizes = {
-  mini: '12px',
-  small: '16px',
-  medium: '24px',
-  large: '32px',
-  jumbo: '64px'
+  mini: "12px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
 };
-export var PartnerLogoTypes = ['symbol', 'wordmark', 'lockup'];
+export var PartnerLogoTypes = ["symbol", "wordmark", "lockup"];

package/lib/PartnerLogo/styles.js

@@ -1,19 +1,19 @@
-import styled, { css } from 'styled-components';
-import { verticalAlign } from 'styled-system';
+import styled, { css } from "styled-components";
+import { verticalAlign } from "styled-system";
 import { COMMON, FLEXBOX } from "../utils/system-props";
 var sizes = {
-  mini: '12px',
-  small: '16px',
-  medium: '24px',
-  large: '32px',
-  jumbo: '64px'
+  mini: "12px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
 };
 
 // TODO: remove width from stylesForSize
 var stylesForSize = function stylesForSize(height, width, logoSize) {
-  return css(["height:", ";line-height:", ";.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : '');
+  return css(["height:", ";line-height:", ";.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : "");
 };
-var Container = styled('span').withConfig({
+var Container = styled("span").withConfig({
   displayName: "styles__Container",
   componentId: "sc-hrrn7g-0"
 })(["display:inline-block;color:inherit;vertical-align:middle;", " ", " ", " ", ""], COMMON, FLEXBOX, verticalAlign, function (props) {

package/lib/Popout/Popout.flow.js

@@ -1,3 +1,3 @@
-import * as React from 'react';
+import * as React from "react";
 
 // Seeds docs can't parse $Keys<typeof placements> yet

package/lib/Popout/Popout.js

@@ -16,30 +16,30 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-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 * as React from "react";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+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 Portal from "../Portal";
 import Box from "../Box";
 import { TargetWrapper } from "./styles";
 export var placements = {
-  auto: 'auto',
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-  'top-start': 'top-start',
-  'right-start': 'right-start',
-  'bottom-start': 'bottom-start',
-  'left-start': 'left-start',
-  'top-end': 'top-end',
-  'right-end': 'right-end',
-  'bottom-end': 'bottom-end',
-  'left-end': 'left-end'
+  auto: "auto",
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left",
+  "top-start": "top-start",
+  "right-start": "right-start",
+  "bottom-start": "bottom-start",
+  "left-start": "left-start",
+  "top-end": "top-end",
+  "right-end": "right-end",
+  "bottom-end": "bottom-end",
+  "left-end": "left-end"
 };
 var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
   return ref.current && event.target instanceof Node && ref.current.contains(event.target);
@@ -67,7 +67,7 @@ export function Popout(_ref) {
     content = _ref.content,
     children = _ref.children,
     _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
+    placement = _ref$placement === void 0 ? "auto" : _ref$placement,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     _ref$zIndex = _ref.zIndex,
@@ -86,7 +86,7 @@ export function Popout(_ref) {
     _ref$focusLockProps = _ref.focusLockProps,
     focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
     color = _ref.color,
-    ariaHasPopup = _ref['aria-haspopup'],
+    ariaHasPopup = _ref["aria-haspopup"],
     _ref$disableWrapperAr = _ref.disableWrapperAria,
     disableWrapperAria = _ref$disableWrapperAr === void 0 ? false : _ref$disableWrapperAr,
     id = _ref.id,
@@ -96,7 +96,7 @@ export function Popout(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isInternalShown = _useState2[0],
     setIsInternalShown = _useState2[1];
-  var isControlled = typeof isOpen === 'boolean';
+  var isControlled = typeof isOpen === "boolean";
   var isShown = isControlled ? isOpen : isInternalShown;
   var setIsShown = useMemo(function () {
     return isControlled && setIsOpen ? setIsOpen : function (nextIsShown) {
@@ -148,18 +148,18 @@ export function Popout(_ref) {
       // Callback for allowing user to close by keying "esc"
       var onEsc = function onEsc(e) {
         // older browsers use "Esc"
-        if (['Escape', 'Esc'].includes(e.key)) {
+        if (["Escape", "Esc"].includes(e.key)) {
           // stop propagation to avoid interacting with other components when popout is shown
           // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal
           e.stopPropagation();
           setIsShown(false, e);
         }
       };
-      documentBody.addEventListener('click', bodyClick, false);
-      documentBody.addEventListener('keydown', onEsc, false);
+      documentBody.addEventListener("click", bodyClick, false);
+      documentBody.addEventListener("keydown", onEsc, false);
       return function () {
-        documentBody.removeEventListener('click', bodyClick, false);
-        documentBody.removeEventListener('keydown', onEsc, false);
+        documentBody.removeEventListener("click", bodyClick, false);
+        documentBody.removeEventListener("keydown", onEsc, false);
       };
     }
   }, [isShown, setIsShown]);
@@ -187,8 +187,8 @@ export function Popout(_ref) {
   // WAI-Aria properties for the popout trigger, disabled if necessary
   var ariaProps = useMemo(function () {
     return disableWrapperAria ? {} : {
-      'aria-expanded': isShown,
-      'aria-haspopup': ariaHasPopup ? ariaHasPopup : true
+      "aria-expanded": isShown,
+      "aria-haspopup": ariaHasPopup ? ariaHasPopup : true
     };
   }, [isShown, ariaHasPopup, disableWrapperAria]);
 
@@ -210,7 +210,7 @@ export function Popout(_ref) {
       setShouldRenderPopout(true);
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === "function" ? children({
     ref: childrenRef,
     toggle: toggle,
     show: show,
@@ -233,7 +233,7 @@ export function Popout(_ref) {
       placement: placement,
       modifiers: {
         preventOverflow: {
-          boundariesElement: 'viewport'
+          boundariesElement: "viewport"
         }
       }
     }, popperProps), function (_ref3) {
@@ -254,7 +254,7 @@ export function Popout(_ref) {
         ref: interceptRef,
         style: _objectSpread(_objectSpread({}, style), {}, {
           zIndex: zIndex,
-          width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
+          width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
         }),
         "data-placement": placement,
         "data-qa-popout": "",
@@ -270,9 +270,9 @@ export function Popout(_ref) {
         autoFocus: autoFocus,
         returnFocus: returnFocus,
         disabled: !focusOnContent
-      }, restFocusLockProps), typeof content === 'function' && content({
+      }, restFocusLockProps), typeof content === "function" && content({
         hide: hide
-      }), typeof content !== 'function' && content)));
+      }), typeof content !== "function" && content)));
     }));
   }));
 }
@@ -290,6 +290,6 @@ var PopoutContent = function PopoutContent(_ref4) {
     m: 300
   }, rest), children);
 };
-PopoutContent.displayName = 'Popout.Content';
+PopoutContent.displayName = "Popout.Content";
 Popout.Content = PopoutContent;
 export default Popout;

package/lib/Popout/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 import { COMMON, LAYOUT } from "../utils/system-props";
 export var TargetWrapper = styled.div.withConfig({
   displayName: "styles__TargetWrapper",

package/lib/Portal/Portal.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/Portal/Portal.js

@@ -12,8 +12,8 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 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 * as React from "react";
+import { createPortal } from "react-dom";
 import { canUseDOM } from "../utils";
 var Portal = /*#__PURE__*/function (_React$Component) {
   _inherits(Portal, _React$Component);
@@ -30,7 +30,7 @@ var Portal = /*#__PURE__*/function (_React$Component) {
         _this.el = el;
       } else {
         _this.el = document.createElement(as);
-        _this.el.setAttribute('data-racine-portal', id);
+        _this.el.setAttribute("data-racine-portal", id);
       }
     }
     return _this;
@@ -71,7 +71,7 @@ var Portal = /*#__PURE__*/function (_React$Component) {
   return Portal;
 }(React.Component);
 _defineProperty(Portal, "defaultProps", {
-  as: 'div',
-  id: ''
+  as: "div",
+  id: ""
 });
 export { Portal as default };

package/lib/Radio/Radio.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/Radio/Radio.js

@@ -16,7 +16,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 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 * as React from "react";
 import Container, { Input, InputWrapper, LabelText } from "./styles";
 /**
  * Primitive Radio Element
@@ -67,7 +67,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         color = _this$props.color,
         rest = _objectWithoutProperties(_this$props, _excluded);
       return /*#__PURE__*/React.createElement(Container, _extends({
-        as: label && 'label'
+        as: label && "label"
         // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -87,7 +87,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        "data-qa-radio": name || '',
+        "data-qa-radio": name || "",
         "data-qa-radio-ischecked": checked === true,
         "data-qa-radio-isdisabled": disabled === true
       }, qa))), label && /*#__PURE__*/React.createElement(LabelText, {

package/lib/Radio/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { focusRing, disabled } from "../utils/mixins";
 import { COMMON } from "../utils/system-props";
 import Text from "../Text";
@@ -6,12 +6,12 @@ var Container = styled.span.withConfig({
   displayName: "styles__Container",
   componentId: "sc-w38s4t-0"
 })(["display:inline-flex;align-items:center;box-sizing:border-box;", ""], COMMON);
-Container.displayName = 'Radio';
+Container.displayName = "Radio";
 export var Input = styled.input.withConfig({
   displayName: "styles__Input",
   componentId: "sc-w38s4t-1"
 })(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;appearance:none;cursor:", ";border:1px solid ", ";border-radius:50%;background-color:", ";transition:border-color ", " ", ",background-color ", " ", ";&:focus{", "}"], function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
+  return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
   return props.theme.colors.form.border.base;
 }, function (props) {
@@ -25,16 +25,16 @@ export var Input = styled.input.withConfig({
 }, function (props) {
   return props.theme.easing.ease_in;
 }, focusRing);
-Input.displayName = 'Input';
+Input.displayName = "Input";
 export var InputWrapper = styled.span.withConfig({
   displayName: "styles__InputWrapper",
   componentId: "sc-w38s4t-2"
-})(["position:relative;width:", ";height:", ";cursor:", ";", " &:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;opacity:0;transition:opacity ", " ", ";z-index:1;pointer-events:none;cursor:", ";}", " ", ""], function (props) {
+})(["position:relative;width:", ";height:", ";cursor:", ";", " &:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;opacity:0;transition:opacity ", " ", ";z-index:1;pointer-events:none;cursor:", ";}", " ", ""], function (props) {
   return props.theme.space[400];
 }, function (props) {
   return props.theme.space[400];
 }, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
+  return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
   return props.disabled && disabled;
 }, function (props) {
@@ -42,13 +42,13 @@ export var InputWrapper = styled.span.withConfig({
 }, function (props) {
   return props.theme.easing.ease_in;
 }, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
+  return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
   return !props.checked && css(["&:hover,&:focus{", "{border-color:", ";background-color:", ";}&:before{opacity:", ";background-color:", ";}}"], Input, props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.disabled ? 0 : 1, props.theme.colors.form.background.base);
 }, function (props) {
   return props.checked && css(["", "{border-color:", ";background-color:", ";}&:before{opacity:1;background-color:", ";}"], Input, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.theme.colors.form.background.base);
 });
-InputWrapper.displayName = 'InputWrapper';
+InputWrapper.displayName = "InputWrapper";
 export var LabelText = styled(Text).withConfig({
   displayName: "styles__LabelText",
   componentId: "sc-w38s4t-3"
@@ -57,11 +57,11 @@ export var LabelText = styled(Text).withConfig({
 }, function (props) {
   return props.theme.typography[200].fontSize;
 }, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
+  return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
   return props.theme.colors.text.headline;
 }, function (props) {
   return props.disabled && css(["opacity:0.4;"]);
 });
-LabelText.displayName = 'LabelText';
+LabelText.displayName = "LabelText";
 export default Container;

package/lib/SegmentedControl/SegmentedControl.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";