@atlaskit/spotlight/dist/esm/ui/card/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, useEffect, useRef } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Box } from '@atlaskit/primitives/compiled';
import { SpotlightContext } from '../../controllers/context';
import { getResolvedPositionArea } from '../../utils/get-resolved-position-area';
import { Caret } from './caret';
var styles = {
  root: "_kqswh2mm _1bsb1ns9",
  card: "_2rko1mok _zulpu2gc _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs1nax",
  'start span-start': "_85i512x7",
  'block-start': "_85i512x7",
  'start span-end': "_85i512x7",
  'end span-start': "_1q5112x7",
  'block-end': "_1q5112x7",
  'end span-end': "_1q5112x7",
  'span-start end': "_bozg12x7",
  'span-end end': "_bozg12x7",
  'span-start start': "_y4ti12x7",
  'span-end start': "_y4ti12x7"
};

/**
 * __Spotlight__
 *
 * The base UI card that wraps composable spotlight components.
 */
export var SpotlightCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    placement = _ref.placement,
    testId = _ref.testId;
  var _useContext = useContext(SpotlightContext),
    card = _useContext.card,
    popoverContent = _useContext.popoverContent;
  var cardRef = useRef(null);
  var positionArea = getResolvedPositionArea(placement || card.placement, popoverContent.positionArea);
  useEffect(function () {
    card.setRef(cardRef);
  }, [card]);
  var content = /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    ref: ref,
    className: ax([styles.root, styles[positionArea]])
  }, /*#__PURE__*/React.createElement(Caret, {
    placement: placement
  }), /*#__PURE__*/React.createElement(Box, {
    ref: cardRef,
    backgroundColor: "color.background.neutral.bold",
    xcss: styles.card
  }, children));
  if (fg('platform-dst-motion-uplift-spotlight')) {
    var Motion = card.motion;
    if (Motion) {
      return /*#__PURE__*/React.createElement(Motion, null, content);
    }
  }
  return content;
});