How to use the @paprika/tokens.popover function in @paprika/tokens

getScrollContainer: PropTypes.func,

  /** If this value is true, focus will stay at the trigger when showing popover, and only can be closed when clicking outside or pressing escape key . Default is false. */
  shouldKeepFocus: PropTypes.bool,

  /** Number setting the z-index for the popover content */
  zIndex: PropTypes.number,
};

const defaultProps = {
  align: "bottom",
  isDark: false,
  isEager: false,
  isOpen: null,
  defaultIsOpen: null,
  maxWidth: parseInt(tokens.popover.maxWidth, 10),
  onClose: null,
  offset: parseInt(tokens.spaceLg, 10),
  getPositioningElement: null,
  getScrollContainer: null,
  shouldKeepFocus: false,
  zIndex: 1,
};

class Popover extends React.Component {
  constructor(props) {
    super(props);

    this.hasListeners = false;
    this.$popover = React.createRef();
    this.$trigger = null;
    this.$tip = null; // this ref comes from a callback of the  component

import { css } from "styled-components";
import tokens from "@paprika/tokens";

const contentStyles = css`
  background: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.popover.borderRadius};
  box-shadow: ${tokens.popover.shadow};
  min-width: 150px;
  overflow-wrap: break-word;
  padding: 0;
  text-align: left;
`;

export default contentStyles;

import { css } from "styled-components";
import tokens from "@paprika/tokens";

const contentStyles = css`
  background: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.popover.borderRadius};
  box-shadow: ${tokens.popover.shadow};
  min-width: 150px;
  overflow-wrap: break-word;
  padding: 0;
  text-align: left;
`;

export default contentStyles;

import { css } from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";

const contentStyles = css`
  background: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.popover.borderRadius};
  box-shadow: ${tokens.popover.shadow};
  margin-left: ${stylers.spacer(2)};
  min-width: 150px;
  overflow-wrap: break-word;
  padding: ${tokens.space} 0;
  text-align: left;

  ${({ isOpen }) => (isOpen === false ? "opacity: 0;" : "")}
`;

export default contentStyles;

import { css } from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";

const contentStyles = css`
  background: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.popover.borderRadius};
  box-shadow: ${tokens.popover.shadow};
  margin-left: ${stylers.spacer(2)};
  min-width: 150px;
  overflow-wrap: break-word;
  padding: ${tokens.space} 0;
  text-align: left;

  ${({ isOpen }) => (isOpen === false ? "opacity: 0;" : "")}
`;

export default contentStyles;

const styles = {
  table: css`
    td {
      max-width: 210px;
      overflow: hidden;
      padding: 8px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  `,
  fileInput: css`
    align-items: center;
    border: 1px dashed blue;
    border-radius: 6px;
    box-shadow: ${tokens.popover.shadow};
    display: flex;
    height: 200px;
    justify-content: center;
    width: 300px;
  `,
};
const propTypes = {
  hasUploadButton: PropTypes.bool,
};

const defaultProps = {
  hasUploadButton: false,
};

function hasError(isValid) {
  return isValid ? "👍" : "🚨";