@sproutsocial/racine 22.5.1 → 23.1.0

package/dist/types/Popout/PopoutTypes.d.ts

@@ -1,90 +0,0 @@
-import * as React from "react";
-import type { PopperProps } from "react-popper";
-import type { TypeStyledComponentsCommonProps } from "../types/styled-components";
-import type { TypeSystemCommonProps, TypeSystemLayoutProps } from "@sproutsocial/seeds-react-system-props";
-export type EnumPlacements = "auto" | "top" | "right" | "bottom" | "left" | "top-start" | "right-start" | "bottom-start" | "left-start" | "top-end" | "right-end" | "bottom-end" | "left-end";
-export interface TypeFocusLockProps {
-    disabled?: boolean;
-    returnFocus?: boolean | {
-        preventScroll?: boolean;
-    };
-    persistentFocus?: boolean;
-    autoFocus?: boolean;
-    noFocusGuards?: boolean | "tail";
-    group?: string;
-    className?: string;
-    onActivation?: (node: HTMLElement) => void;
-    onDeactivation?: (node: HTMLElement) => void;
-    as?: TypeStyledComponentsCommonProps["as"];
-    lockProps?: any;
-    ref?: any;
-    whiteList?: (activeElement: HTMLElement) => boolean;
-    shards?: Array<any>;
-    children?: React.ReactNode;
-}
-export interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, Omit<React.ComponentPropsWithoutRef<"div">, "color" | "children" | "content"> {
-    /**
-     * Whether Popout should automatically add aria-attributes to its wrapped elements
-     */
-    disableWrapperAria?: boolean;
-    /**
-     * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.
-     */
-    isOpen?: boolean;
-    /**
-     * If you use the isOpen prop you will need to pass a handler to change the state of the popout
-     */
-    setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;
-    /**
-     * The content to be shown in the popout. If there is no content, just the children are rendered
-     */
-    content: (React.ReactElement<any> | null | undefined) | (((opts: {
-        hide: () => void;
-    }) => React.ReactElement<any>) | null | undefined);
-    /**
-     * The content that the popout should be attached to
-     */
-    children: React.ReactElement<any> | ((opts: {
-        ref: (arg0: React.ElementRef<any> | HTMLElement) => void;
-        toggle: () => void;
-        show: () => void;
-        hide: () => void;
-        ariaProps: Record<string, any>;
-    }) => React.ReactNode);
-    /** How the popped-out content should be placed, in relationship to the children */
-    placement?: EnumPlacements;
-    /**
-     * Should the popped-out content inherit its width from the children?
-     * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
-     */
-    fullWidth?: boolean;
-    /**
-     *  When the popout has opened, should we focus on its content?
-     *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.
-     *  Upon closing the popout, focus will be returned to the popout's target.
-     *  If nothing within your popout's content is focusable, this prop will do nothing.
-     */
-    focusOnContent?: boolean;
-    qa?: Record<string, string>;
-    zIndex?: number;
-    /**
-     * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation
-     */
-    popperProps?: Partial<PopperProps>;
-    onClose?: () => void;
-    onOpen?: () => void;
-    /**
-     * And optional callback to receive the scheduleUpdate function.
-     * Use the function to recalculate the popout position in relation to the contents.
-     */
-    scheduleUpdateRef?: (arg0: () => void) => void;
-    /**
-     * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree
-     */
-    appendToBody?: boolean;
-    /**
-     * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api
-     */
-    focusLockProps?: TypeFocusLockProps;
-}
-//# sourceMappingURL=PopoutTypes.d.ts.map

package/dist/types/Popout/PopoutTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopoutTypes.d.ts","sourceRoot":"","sources":["../../../src/Popout/PopoutTypes.ts"],"names":[],"mappings":"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"}

package/dist/types/Popout/index.d.ts

@@ -1,5 +0,0 @@
-import Popout from "./Popout";
-export default Popout;
-export { Popout };
-export * from "./PopoutTypes";
-//# sourceMappingURL=index.d.ts.map

package/dist/types/Popout/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Popout/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,cAAc,eAAe,CAAC"}

package/dist/types/Popout/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const TargetWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-//# sourceMappingURL=styles.d.ts.map

package/dist/types/Popout/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Popout/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,yGAIzB,CAAC"}

package/lib/Drawer/SlideTransition.js

@@ -1,38 +0,0 @@
-var _excluded = ["isVisible", "children", "width", "direction"];
-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 { useTransition } from "react-spring";
-import { MOTION_DURATION_MEDIUM } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
-export var SlideTransition = function SlideTransition(_ref) {
-  var isVisible = _ref.isVisible,
-    children = _ref.children,
-    width = _ref.width,
-    direction = _ref.direction,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var offset = width * (direction === "left" ? -1 : 1);
-  var transitions = useTransition(isVisible, null, {
-    from: {
-      transform: "translateX(".concat(offset, "px)")
-    },
-    enter: {
-      transform: "translateX(0)"
-    },
-    leave: {
-      transform: "translateX(".concat(offset, "px)")
-    },
-    config: {
-      duration: MOTION_DURATION_MEDIUM * 1000
-    }
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, transitions.map(function (_ref2) {
-    var key = _ref2.key,
-      item = _ref2.item,
-      props = _ref2.props;
-    return children({
-      key: key,
-      isVisible: item,
-      style: props
-    });
-  }));
-};

package/lib/Popout/Popout.js

@@ -1,303 +0,0 @@
-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); }
-var _excluded = ["isOpen", "setIsOpen", "content", "children", "placement", "fullWidth", "zIndex", "focusOnContent", "onOpen", "onClose", "qa", "popperProps", "scheduleUpdateRef", "appendToBody", "focusLockProps", "color", "aria-haspopup", "disableWrapperAria", "id"],
-  _excluded2 = ["autoFocus", "returnFocus"],
-  _excluded3 = ["children"];
-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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-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 _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; }
-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 { useMutationObserver } from "@sproutsocial/seeds-react-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"
-};
-var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
-  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
-};
-
-// Transition definitions for fading in and out
-var transitionConfig = {
-  from: {
-    opacity: 0
-  },
-  enter: {
-    opacity: 1
-  },
-  leave: {
-    opacity: 0
-  },
-  config: {
-    duration: MOTION_DURATION_FAST * 1000
-  }
-};
-export function Popout(_ref) {
-  var _popoutRef$current;
-  var isOpen = _ref.isOpen,
-    setIsOpen = _ref.setIsOpen,
-    content = _ref.content,
-    children = _ref.children,
-    _ref$placement = _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,
-    zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
-    _ref$focusOnContent = _ref.focusOnContent,
-    focusOnContent = _ref$focusOnContent === void 0 ? true : _ref$focusOnContent,
-    onOpen = _ref.onOpen,
-    onClose = _ref.onClose,
-    _ref$qa = _ref.qa,
-    qa = _ref$qa === void 0 ? {} : _ref$qa,
-    popperProps = _ref.popperProps,
-    _ref$scheduleUpdateRe = _ref.scheduleUpdateRef,
-    scheduleUpdateRef = _ref$scheduleUpdateRe === void 0 ? function () {} : _ref$scheduleUpdateRe,
-    _ref$appendToBody = _ref.appendToBody,
-    appendToBody = _ref$appendToBody === void 0 ? true : _ref$appendToBody,
-    _ref$focusLockProps = _ref.focusLockProps,
-    focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
-    color = _ref.color,
-    ariaHasPopup = _ref["aria-haspopup"],
-    _ref$disableWrapperAr = _ref.disableWrapperAria,
-    disableWrapperAria = _ref$disableWrapperAr === void 0 ? false : _ref$disableWrapperAr,
-    id = _ref.id,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isInternalShown = _useState2[0],
-    setIsInternalShown = _useState2[1];
-  var isControlled = typeof isOpen === "boolean";
-  var isShown = isControlled ? isOpen : isInternalShown;
-  var setIsShown = useMemo(function () {
-    return isControlled && setIsOpen ? setIsOpen : function (nextIsShown) {
-      return setIsInternalShown(nextIsShown);
-    };
-  }, [isControlled, setIsOpen]);
-  var targetRef = useRef();
-  var popoutRef = useRef();
-  var isFirstRender = useRef(true);
-
-  // This callback will automatically trigger a recalculation of the popout position if the content is changed
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  var scheduleUpdateCallback = useRef(function () {});
-  useMutationObserver((_popoutRef$current = popoutRef.current) !== null && _popoutRef$current !== void 0 ? _popoutRef$current : null, {
-    childList: true,
-    characterData: true,
-    subtree: true
-  }, scheduleUpdateCallback.current);
-  var _focusLockProps$autoF = focusLockProps.autoFocus,
-    autoFocus = _focusLockProps$autoF === void 0 ? true : _focusLockProps$autoF,
-    _focusLockProps$retur = focusLockProps.returnFocus,
-    returnFocus = _focusLockProps$retur === void 0 ? true : _focusLockProps$retur,
-    restFocusLockProps = _objectWithoutProperties(focusLockProps, _excluded2);
-  var isInvalidContent = content === null || content === undefined;
-
-  // Callbacks for showing, hiding, and toggling visibility of the popout
-  // (Not used when isOpen is passed explicitly)
-  var show = useCallback(function () {
-    return setIsShown(true);
-  }, [setIsShown]);
-  var hide = useCallback(function () {
-    return setIsShown(false);
-  }, [setIsShown]);
-  var toggle = useCallback(function () {
-    return setIsShown(!isShown);
-  }, [isShown, setIsShown]);
-  useEffect(function () {
-    var documentBody = document.body;
-    if (isShown && documentBody) {
-      // Callback passed to a click handler attached to document.body,
-      // allowing user to close the popout by clicking outside
-      var bodyClick = function bodyClick(e) {
-        if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
-          return;
-        }
-        setIsShown(false, e);
-      };
-
-      // Callback for allowing user to close by keying "esc"
-      var onEsc = function onEsc(e) {
-        // older browsers use "Esc"
-        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, {
-        capture: true
-      });
-      documentBody.addEventListener("keydown", onEsc, {
-        capture: true
-      });
-      return function () {
-        documentBody.removeEventListener("click", bodyClick, {
-          capture: true
-        });
-        documentBody.removeEventListener("keydown", onEsc, {
-          capture: true
-        });
-      };
-    }
-  }, [isShown, setIsShown]);
-
-  // Manage onOpen and onClose callbacks
-  useEffect(function () {
-    // Don't fire onClose on the first render
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    if (!onOpen && !onClose) {
-      return;
-    }
-    if (isShown && onOpen) {
-      onOpen();
-    }
-    if (!isShown && onClose) {
-      onClose();
-    }
-  },
-  // eslint-disable-next-line
-  [isShown]);
-  var transitions = useTransition(isShown, null, transitionConfig);
-  // WAI-Aria properties for the popout trigger, disabled if necessary
-  var ariaProps = useMemo(function () {
-    return disableWrapperAria ? {} : {
-      "aria-expanded": isShown,
-      "aria-haspopup": ariaHasPopup ? ariaHasPopup : true
-    };
-  }, [isShown, ariaHasPopup, disableWrapperAria]);
-
-  // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
-  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,
-  // the Popout component renders, but doesn't know how to position itself due the
-  // `refereElement` property being undefined.
-  var _useState3 = useState(
-    // Only trigger this shouldRenderPopout logic when using a controlled component.
-    // The reason for that is because controlled components may render the popout
-    // immediately before the targetRef has a value set to it.
-    !isControlled),
-    _useState4 = _slicedToArray(_useState3, 2),
-    shouldRenderPopout = _useState4[0],
-    setShouldRenderPopout = _useState4[1];
-  var childrenRef = function childrenRef(el) {
-    targetRef.current = el;
-    if (targetRef.current) {
-      setShouldRenderPopout(true);
-    }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === "function" ? children({
-    ref: childrenRef,
-    toggle: toggle,
-    show: show,
-    hide: hide,
-    ariaProps: ariaProps
-  }) : /*#__PURE__*/React.createElement(TargetWrapper, _extends({}, qa, {
-    id: id
-  }, rest, {
-    ref: childrenRef
-  }), /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, ariaProps), !isControlled ? {
-    onClick: toggle
-  } : undefined))), shouldRenderPopout && !isInvalidContent && transitions.map(function (_ref2) {
-    var item = _ref2.item,
-      key = _ref2.key,
-      props = _ref2.props;
-    return item && /*#__PURE__*/React.createElement(PopoutComponentWrapper, {
-      key: key
-    }, /*#__PURE__*/React.createElement(Popper, _extends({
-      referenceElement: targetRef.current,
-      placement: placement,
-      modifiers: {
-        preventOverflow: {
-          boundariesElement: "viewport"
-        }
-      }
-    }, popperProps), function (_ref3) {
-      var ref = _ref3.ref,
-        style = _ref3.style,
-        placement = _ref3.placement,
-        outOfBoundaries = _ref3.outOfBoundaries,
-        scheduleUpdate = _ref3.scheduleUpdate;
-      var interceptRef = function interceptRef(el) {
-        popoutRef.current = el;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        ref(el);
-      };
-      scheduleUpdateCallback.current = scheduleUpdate;
-      scheduleUpdateRef(scheduleUpdate);
-      return /*#__PURE__*/React.createElement("div", _extends({
-        ref: interceptRef,
-        style: _objectSpread(_objectSpread({}, style), {}, {
-          zIndex: zIndex,
-          width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
-        }),
-        "data-placement": placement,
-        "data-qa-popout": "",
-        "data-qa-popout-isopen": isOpen === true
-        // 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
-        ,
-        color: color
-      }, rest), item && !outOfBoundaries && /*#__PURE__*/React.createElement(animated.div, {
-        style: props
-      }, /*#__PURE__*/React.createElement(FocusLock, _extends({
-        autoFocus: autoFocus,
-        returnFocus: returnFocus,
-        disabled: !focusOnContent
-      }, restFocusLockProps), typeof content === "function" && content({
-        hide: hide
-      }), typeof content !== "function" && content)));
-    }));
-  }));
-}
-var PopoutContent = function PopoutContent(_ref4) {
-  var children = _ref4.children,
-    rest = _objectWithoutProperties(_ref4, _excluded3);
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    bg: "container.background.base",
-    color: "text.body",
-    border: 500,
-    borderColor: "container.border.base",
-    borderRadius: "outer",
-    boxShadow: "medium",
-    p: 400,
-    m: 300
-  }, rest), children);
-};
-PopoutContent.displayName = "Popout.Content";
-Popout.Content = PopoutContent;
-export default Popout;

package/lib/Popout/PopoutTypes.js

@@ -1 +0,0 @@
-export {};

package/lib/Popout/index.js

@@ -1,4 +0,0 @@
-import Popout from "./Popout";
-export default Popout;
-export { Popout };
-export * from "./PopoutTypes";

package/lib/Popout/styles.js

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