@atlaskit/spotlight/dist/es2019/ui/card/caret/top-layer.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

/* top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./top-layer.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useContext } from 'react';
import { SpotlightContext } from '../../../controllers/context';
import { getResolvedPositionArea } from '../../../utils/get-resolved-position-area';
const styles = {
  root: "_bfhk1aqn _mkrzmhja _4t3io7ao _kqswstnw _1bsbo7ao",
  'start span-start': "_u7coze3t _rjxpv47k _t9ec71a3",
  'block-start': "_u7coze3t _1e02srgr _t9ec71a3",
  'start span-end': "_u7coze3t _1e02183y _t9ec71a3",
  'span-start end': "_1e02ze3t _u7codlk8 _t9ecjyd4",
  'span-end end': "_1e02ze3t _152t8jkm _t9ecjyd4",
  'span-start start': "_rjxpze3t _u7codlk8 _t9ecebzf",
  'span-end start': "_rjxpze3t _152t8jkm _t9ecebzf",
  'end span-start': "_152tze3t _rjxpgktf _t9ec1hke",
  'block-end': "_152tze3t _1e02srgr _t9ec1hke",
  'end span-end': "_152tze3t _1e02183y _t9ec1hke"
};
/**
 * __Caret__
 *
 * A `Caret` is a purely visual pointer displayed on the edge of a spotlight, which points to the target element.
 *
 */
export const Caret = /*#__PURE__*/forwardRef(({
  placement,
  testId
}, ref) => {
  const {
    card,
    popoverContent
  } = useContext(SpotlightContext);
  const positionArea = getResolvedPositionArea(placement || card.placement, popoverContent.positionArea);
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    ref: ref,
    // Growth Pattern Library designs dictate 1px radius. cssMap only allows tokens
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    style: {
      borderEndStartRadius: '1px'
    },
    className: ax([styles.root, styles[positionArea]])
  });
});