@atlaskit/spotlight/dist/es2019/ui/card/caret/legacy.js

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

/* legacy.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./legacy.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useContext } from 'react';
import { SpotlightContext } from '../../../controllers/context';
const styles = {
  root: "_bfhk1aqn _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
  'top-start': "_t9ec71a3",
  'top-center': "_t9ec71a3",
  'top-end': "_t9ec71a3",
  'bottom-start': "_t9ec1hke",
  'bottom-center': "_t9ec1hke",
  'bottom-end': "_t9ec1hke",
  'right-start': "_t9ecjyd4",
  'right-end': "_t9ecjyd4",
  'left-start': "_t9ecebzf",
  'left-end': "_t9ecebzf"
};
/**
 * __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
  } = useContext(SpotlightContext);
  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[placement || card.placement]])
  });
});